Tooltip di CSS: Cara Membuat dan Contoh Codenya

Section Artikel

1 Tooltip Dasar
2 Posisi Tooltips
3 Tooltip Arrow
4 Fade In Tooltips (Animasi)

Tooltip Dasar

Tooltip berfungsi untuk menampilkan teks atau gambar ketika mouse digerakkan ke arah item yang ada di website.

Contoh :

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

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 120px;
  background-color: black;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;
 
  /* Position the tooltip text - see examples below! */
  position: absolute;
  z-index: 1;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>

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

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

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

  /* Position the tooltip */
  position: absolute;
  z-index: 1;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

<p>Perhatikan bahwa posisi teks tooltip tidak terlalu bagus. Kembali ke tutorial dan lanjutkan membaca tentang cara memposisikan tooltip dengan cara yang diinginkan.</p>

</body>
</html>

Penjelasan Kode

HTML: Gunakan elemen kontainer (<div> ) dan tambahkan kelas “tooltip” ke dalamnya. Saat kita mengarahkan mouse ke elemen, teks tooltip akan ditampilkan. Teks tooltip ditempatkan di dalam elemen sebaris (<span>) dengan class = “tooltiptext“.

CSS: Kelas tooltip menggunakan position: relative, yang diperlukan untuk memposisikan teks tooltip (position: absolute).

Kelas tooltiptext berfungsi untuk menyimpan teks tooltip yang sebenarnya. Teks ini tersembunyi secara default dan akan terlihat saat mengarahkan kursor (lihat di bawah). Kita juga telah menambahkan beberapa gaya dasar ke dalamnya: lebar 120px, warna latar belakang hitam, warna teks putih, teks tengah, dan padding atas dan bawah 5px.

Properti CSS border-radius digunakan untuk menambahkan sudut membulat ke teks tooltip.

Selektor :hover digunakan untuk menampilkan teks tooltip saat pengguna menggerakkan mouse ke <div> dengan class = "tooltip".

Posisi Tooltips

Dalam contoh ini, tooltip ditempatkan di sebelah kanan (left: 105%) teks “diarahkan” (<div>). Perhatikan juga bahwa top: -5px digunakan untuk menempatkannya di tengah elemen penampungnya. kita gunakan angka 5 karena teks tooltip memiliki bantalan atas dan bawah 5px. Jika kita ingin menambah bantalannya, tingkatkan juga nilai properti atas untuk memastikannya tetap di tengah. Hal yang sama berlaku jika kita ingin tooltip ditempatkan di sebelah kiri.

Right Tooltip

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

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

</body>
</html>

Left Tooltip

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

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

</body>
</html>

Jika kita ingin tooltip muncul di atas atau di bawah, lihat contoh di bawah. Perhatikan bahwa kita akan menggunakan properti margin-left dengan nilai minus 60 piksel. Properti ini untuk memusatkan keterangan alat di atas / di bawah teks yang dapat di-hover, disetel ke setengah dari lebar tooltip (120/2 = 60).

Top Tooltip

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

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

</body>
</html>

Bottom Tooltip

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

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

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

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

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

</body>
</html>

Tooltip Arrow

Untuk membuat panah yang akan muncul dari sisi spesifik tooltip, tambahkan konten “kosong” setelah tooltip, dengan pseudo-element class ::after bersama dengan properti content. Panah itu sendiri dibuat menggunakan border. Border ini akan membuat tooltip terlihat seperti balon bicara.

Contoh ini menunjukkan cara menambahkan panah ke bagian bawah tooltip:

Bottom Arrow

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

.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: black transparent transparent transparent;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Top Tooltip w/ Bottom Arrow</h2>

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

</body>
</html>

Penjelasan Kode
Posisikan panah di dalam tooltip: top: 100%, maka panag akan ada di bagian bawah tooltip akan . Kemudian, left: 50% akan memusatkan panah.

Catatan: Properti border-width menentukan ukuran panah. Jika kita mengubahnya, ubah juga nilai margin kiri menjadi sama. Cara ini akan membuat panah tetap di tengah.

border-color digunakan untuk mengubah konten menjadi panah. Kita atur border atas menjadi hitam, dan sisanya menjadi transparan. Jika semua sisi berwarna hitam, kita akan mendapatkan kotak persegi hitam.

Contoh ini menunjukkan cara menambahkan panah ke bagian atas tooltip. Kali ini kita atur warna border bawah :

Top Arrow

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

.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;
}

.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Bottom Tooltip w/ Top Arrow</h2>

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

</body>
</html>

Left Arrow

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

.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;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Right Tooltip w/ Left Arrow</h2>

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

</body>
</html>

Right Arrow

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

.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;
}
.tooltip:hover .tooltiptext {
  visibility: visible;
}
</style>
<body style="text-align:center;">

<h2>Left Tooltip w/ Right Arrow</h2>

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

</body>
</html>

Fade In Tooltips (Animasi)

Jika kita ingin memudarkan teks tooltip saat akan terlihat, kita bisa menggunakan properti transition CSS bersama dengan properti opacity dan beralih dari tidak terlihat sama sekali menjadi 100% terlihat, dalam beberapa detik yang ditentukan (1 detik dalam contoh kami):