Membuat Tooltip Pada Blog

Apa itu Tooltip? Menurut saya pribadi sih ini adalah sebuah tool untuk mempermudah seseorang mengetahui sebuah hal yang kurang dimengerti dengan penjelasan singkat pada sebuah notif yang terbilang singkat contohnya saja seperti dibawah ini

Klik Ini coba Maka ini yang akan dihasilkan ketika mouse mengarah ke teks ini

Cara membuatnya terbilang simple juga kok, sama dengan cara tutorial sebelum-sebelumnya.

Pertama anda masuk dashboard blogger

Kemudian masuk ke Tema - Edit HTML. Lalu masukan kode dibawah ini tepat diatas ]]></b:skin>

/* Tooltip by Marwanzaen */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black;
}

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 125%;
    left: 50%;
    margin-left: -60px;
    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;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
    opacity: 1;
}

Jika sudah anda Simpan.
Kemudian ketika anda membuat sebuah postingan yang memuat sebuah tooltip maka masukan kode ini untuk membuat sebuah teks menjadi tooltip.

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

Anda rubah pada teks Hover over me adalah teks yang tertera pada barisan teks artikel. Sedangkan Tooltip text adalah teks yang akan muncul ketika mouse mengarah kepada teks Hover over me.

Hanya seperti itu caranya mudah bukan. Silahkan anda mencobanya.
Referensi : w3schools.com

Terima kasih anda telah membaca artikel Membuat Tooltip Pada Blog. Jika anda kurang paham silahkan berkomentar dibawah & Ada baiknya jika artikel ini bermanfaat Share ke saudara atau teman anda.

Related Posts: