Cara membuat efek tooltip di teks

CSS3 Tooltips adalah sebuah  kotak yang timbul apabila di hover yang digunakan untuk menunjukkan kepada pembaca blog  beberapa maklumat tambahan pada teks atau maklumat tersebut.Ianya boleh digunakan dalam pelbagai cara contohnya seperti memberi kapsyen pada imej ,penerangan yang lebih padat pada hyperlink dan lain-lain lagi. Tooltips juga boleh digunakan di post blog , widgets dan juga di ruangan komen . Sebelum korang cuba baik tengok DEMO dulu

Demo

Caranya , boleh tengok di bawah

1. Paste kode dibawah ini di atas ]]></b:skin>  dan klik Save

/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}
/* Tooltip text */
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    /* Position the tooltip text */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    /* Fade in tooltip */
    opacity: 0;
    transition: opacity 1s;
}
/* Tooltip arrow */
.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: #555 transparent transparent transparent;
}
/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

2. Gunakan kode css di bawah ini di post atau di widget

<div class="tooltip">Hover over me
  <span class="tooltiptext">Tooltip text</span>
</div>

3. Selesai

Mudah kan ? Tinggalkan komen jika tutorial ini sangat membantu 😋