Membuat tooltip khusus dengan css

Apa itu tooltip? Tooltip adalah popup kecil yang muncul ketika cursor berada pada link atau elemen yang di kehendaki. 

Tujuan dari tooltip adalah memberikan informasi tambahan bagi pengunjung website untuk mendapatkan penjelasan singkat dari link yang ingin di tuju.


Berikut di bawah adalah script untuk membuat tooltip sederhana hanya dengan html dan css saja.

Script css tooltip

body {
  margin: 0;
  font-family: verdana;
  background-color:#efc;
  text-align: center;
  color:#000;
}
.text {
  position: relative;
  display: inline-block;
  border-bottom: 1px dotted #555;  
}
.text .tooltip {
  visibility: hidden;
  width: 120px;
  background-color: #333;
  color: #fff;
  text-align: center;
  font-family: verdana;
  font-size: 12px;
  border-radius: 5px;
  padding: 5px 0;
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -60px;
  opacity: 0;
  transition: opacity 0.3s;
}
.text .tooltip::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #333 transparent transparent transparent;
}
.text:hover .tooltip {
  visibility: visible;
  opacity: 1;
}

Script html tooltip

<!DOCTYPE html>
<html>
    <meta charset="utf-8" />
    <title>Create custom tololtip</title>
    <meta content="width=device-width, initial-scale=1.0" name="viewport">

<body>

<h2>Tooltip</h2>
<p>Move the mouse over the text below:</p>

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

</body>
</html>

Sangat simple bukan script diatas. Untuk melihat hasil script diatas dan mengedit-nya secara online, silahkan Anda gunakan Realtime HTML Editor ↗ yang telah kami sediakan.

Sampai disini untuk Free script kali ini, semoga bermanfaat dan salam sukses selalu buat Anda semuanya.

Mungkin Anda Menyukai