Cara membuat teks tooltips

Kalian pasti pernah melihat teks / tulisan yang muncul pada kata tertentu ketika kamu mengarahkan mouse ke kata tersebut. Kata yang muncul tersebut dinamakan tooltips text atau teks tooltips

Tooltips adalah teks yang muncul ketika kamu mengarahkan mouse / pointer kamu ke kata yang sudah kamu buat.
Tooltips sangat berguna untuk memberikan informasi pendek tentang suatu kata atau kalimat.

Bagaimana cara membuat teks tooltips?

Cara membuat tooltips sangatlah mudah, yang kamu butuhkan hanya beberapa baris HTML dan CSS. Berikut saya akan menjelaskan dengan sebisa saya agar dapat mudah dimengerti.

Pasang kode CSS tooltips

Buka edit template pada tab template di dashboard blogger kamu!

Copy & pastelah kode CSS berikut ini tepat sebelum </style> atau pada bagian CSS (style)

CSS
/* Teks tooltips */
.tooltip {
    position: relative;
    display: inline-block;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;

    /* Posisi teks tooltips */
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;

    /* animasi teks tooltips memudar */
    opacity: 0;
    transition: opacity 1s;
}

.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;
}

/* pengaktif teks tooltips */
.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Simpan template; kemudian

Pasang kode HTML

Pasanglah kode HTML berikut ini di tab HTML! bukan compose!

HTML
  <div class="tooltip">
Masukkan kata yang ingin diberi tooltips disini 
<span class="tooltiptext"> Isi teks tooltips </span>
    </div>

ubahlah kata-kata diatas sesuai dengan yang kalian inginkan!

Sekian adalah Cara membuat tooltips pada postingan kamu. Walaupun Saya belum pernah menggunakan teks tooltips ini dalam blog Saya tetapi sudah saya test dan kodenya 100% bekerja.

Demo

× Info! Klik dua kali untuk memilih semua code didalam box.