Cara Membuat Teks Tooltips dengan Mudah

Hai sobat danifin, 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.

Untuk Penjelasannya, Tooltips adalah teks yang muncul ketika kamu mengarahkan mouse / pointer kamu ke kata yang sudah kamu buat.

Jadi, Tooltips sangat berguna untuk memberikan informasi pendek tentang suatu kata atau kalimat.

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 oleh anda yang saya kutip dari sumber aftarfadilah.blogspot.com.

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)

/* 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, selanjutnya

Pasang kode HTML

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

<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! baik text yang akan diberi tooltips maupun isi text tooltipsnya.

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 Contoh Saja

Sumber: aftarfadilah.blogspot.com