Tooltip (CSS)

Hai Sobat Ngode! 🙂 Lanjutan dari tutorial-tutorial CSS sebelumnya, kali ini akan saya bahas mengenai Tooltip. Apasih tootltip itu? Simplenya, tooltip itu untuk memberikan informasi tambahan yang spesifik tentang sesuatu (biasanya teks). Nah tooltip ini akan muncul ketika cursor diarahkan ke teks tersebut. Bisa dibilang mirip-mirip catatan kaki lah ya?

Okay, ada beberapa posisi atau letak tooltip yang biasa di gunakan, yaitu :

  • Top
  • Right
  • Bottom
  • Left

tooltip


Template Dasar Tooltip

Pertama, saya akan berikan template dasarnya terlebih dahulu, yang nantinya dengan template dasar itu, kalian bisa menyesuaikan posisi-posisi tooltipnya

<style>
/* Tooltip container */
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
}

.tooltip .tooltiptext {
   visibility: hidden;
   width: 120px;
   background-color: black;
   color: #fff;
   text-align: center;
   border-radius: 6px;
   padding: 5px 0;
   position: absolute;
   z-index: 1;
   top: -5px;
   right: 110%;
}

.tooltip:hover .tooltiptext {
    visibility: visible;
}
</style>

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

Posisi Tooltip

  • Left Tooltip

Untuk Left tooltip, ganti script yang bercetak tebal pada template diatas, dengan code berikut:

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    right: 110%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent black;
}

  • Right Tooltip

Untuk Right Tooltip, ganti script yang bercetak tebal pada template diatas, dengan code berikut:

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: -5px;
    left: 110%;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent black transparent transparent;
}

  • Top Tooltip

Untuk Top Tooltip, ganti script yang bercetak tebal pada template diatas, dengan code berikut:

.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    bottom: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

  • Bottom Tooltip
.tooltip .tooltiptext {
    visibility: hidden;
    width: 120px;
    background-color: black;
    color: #fff;
    text-align: center;
    border-radius: 6px;
    padding: 5px 0;
    position: absolute;
    z-index: 1;
    top: 150%;
    left: 50%;
    margin-left: -60px;
}

.tooltip .tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent black transparent;
}

Okay, memang agak ribet si.. Hehehe.. Dicoba-coba terus ya? Sekian Tutorial dari saya, semoga bermanfaat

Salam Ngode!