Cara Membuat Tooltip

Reviewed by Sutiono S.Kom., M.Kom., M.T.I

by Hanifah Nurbaeti February 12, 2021

Di bawah ini kita akan mempelajari cara membuat tooltips dengan CSS.

<!DOCTYPE html>
<html>
<style>
.tooltip {
    position: relative;
    display: inline-block;
    border-bottom: 1px dotted #ccc;
    color: #006080;
}

.tooltip .tooltiptext {
    visibility: hidden;
    position: absolute;
    width: 120px;
    background-color: #555;
    color: #fff;
    text-align: center;
    padding: 5px 0;
    border-radius: 6px;
    z-index: 1;
    opacity: 0;
    transition: opacity 0.3s;
}

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

.tooltip-right {
  top: -5px;
  left: 125%;  
}

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

.tooltip-bottom {
  top: 135%;
  left: 50%;  
  margin-left: -60px;
}

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

.tooltip-top {
  bottom: 125%;
  left: 50%;  
  margin-left: -60px;
}

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

.tooltip-left {
  top: -5px;
  bottom:auto;
  right: 128%;  
}
.tooltip-left::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 100%;
    margin-top: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent transparent #555;
}
</style>
<body style="text-align:center;">

<h2>Contoh Tooltip</h2>
<p>Gerakkan mouse ke teks di bawah ini:</p>


  <div class="tooltip">Tooltip Atas
    <span class="tooltiptext tooltip-top">Contoh Tooltip Atast</span>
  </div>
  
<br><br><br>
  
    <div class="tooltip">Tooltip Bawah
    <span class="tooltiptext tooltip-bottom">Contoh Tooltip Bawah</span>
  </div>
  
<br><br><br>

  <div class="tooltip">Tooltip Kanan
    <span class="tooltiptext tooltip-right">Contoh Tooltip Kanan</span>
  </div>

<br><br><br>
  
  <div class="tooltip">Tooltip Kiri
    <span class="tooltiptext tooltip-left">Contoh Tooltip Kiri</span>
</div>

</body>
</html>

Cara Membuat Tooltips

Langkah 1) Tambahkan HTML:
Contoh

  <div class="tooltip">Tooltip Atas
    <span class="tooltiptext tooltip-top">Contoh Tooltip Atast</span>
  </div>
  
<br><br><br>
  
    <div class="tooltip">Tooltip Bawah
    <span class="tooltiptext tooltip-bottom">Contoh Tooltip Bawah</span>
  </div>
  
<br><br><br>

  <div class="tooltip">Tooltip Kanan
    <span class="tooltiptext tooltip-right">Contoh Tooltip Kanan</span>
  </div>

<br><br><br>
  
  <div class="tooltip">Tooltip Kiri
    <span class="tooltiptext tooltip-left">Contoh Tooltip Kiri</span>
</div>

Langkah 2) Tambahkan CSS:
Contoh

/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black; /* Jika  ingin titik-titik di bawah teks yang dapat di-hover */
}

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

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

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Panah Tooltip  */
.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;
}

/* Tampilkan teks tooltip saat mengarahkan mouse ke container tooltip */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}