Cara Membuat Tooltip Dengan HTML5 dan CSS3

Tooltip umumnya dibuat dengan jquery atau javascript, akan tetapi alangkah lebih mudah lagi membuat tooltip hanya dengan menggunakan css saja, tooltip adalah sebuah info yang tampil saat kursor diatas tujuan biasanya secara default pembawaan browser juga ada tooltipnya walau berbentuk umum dengan hanya menggunakan atribut title pada tag html yang dituju sebagai contoh <p title=”tooltip”></p> atau tag yang lainnya seperti <img title=”judul gambar”/>, namun tooltip pembawaan tidak bagus.

tooltip

Selain itu tooltip juga bisa berfungsi sebagai alert atau confirm, tetapi pada tutorial ini saya tidak membahas alert atau confirm yang mengharuskan penggunaan jquery atau javascript, untuk membuat tooltip menggunakan html5 dan css3 maka buatkan file html dengan nama index.html dan simpan disebuah folder baru, gunakan kode dibawah ini.

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8"/>
  <title>Tooltip Text</title>
  <link href="style.css" rel="stylesheet"/>
</head>
<body>

<div class="container">
  <div class="tooltip">
    Left
    <span class="tooltipleft">Tooltip left</span>
  </div>
  <div class="tooltip">
    Top
    <span class="tooltiptop">Tooltip Top</span>
  </div>
  <div class="tooltip">
    Bottom
    <span class="tooltipbottom">Tooltip Bottom</span>
  </div>
  <div class="tooltip">
    Right
    <span class="tooltipright">Tooltip Right</span>
  </div>
</div>

</body>
</html>

Selanjutnya adalah desain pengayaan dengan menggunakan css, buatkan file css baru dengan nama style.css dan simpan bersamaan dengan index.html, gunakan kode dibawah ini.

body{
  font-family:helvetica, sans-serif, arial;
}
.container{
  width: 800px;
  margin:70px auto;
}
.tooltip{
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted black;
  margin: 20px;
  padding:5px;
}
.tooltip .tooltiptop{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  bottom: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltiptop{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltiptop::after{
  content: " ";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: black transparent transparent transparent;
}
.tooltip .tooltipbottom{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: 100%;
  left: 50%;
  margin-left: -60px;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipbottom{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipbottom::after{
  content: " ";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent black transparent;
}
.tooltip .tooltipleft{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  right: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipleft{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipleft::after{
  content: " ";
  position: absolute;
  top: 50%;
  left: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent transparent black;
}
.tooltip .tooltipright{
  visibility: hidden;
  width: 120px;
  background-color: #000;
  color: white;
  text-align: center;
  border-radius: 6px;
  padding: 5px 0;
  position: absolute;;
  z-index: 1;
  top: -2px;
  left: 105%;

  /* make fade in */
  opacity: 0;
  transition:opacity 1s;
}
.tooltip:hover .tooltipright{
  visibility: visible;
  opacity: 1;
}
/* make marker */
.tooltip .tooltipright::after{
  content: " ";
  position: absolute;
  top: 50%;
  right: 100%;
  margin-top: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: transparent black transparent transparent;
}