Tooltip Dengan CSS

Tooltip merupakan elemen yang terdapat pada website atau aplikasi yang berguna untuk memberikan informasi singkat mengenai suatu elemen di dalam website.

Interaksi pada elemen yang akan mengeluarkan tooltip biasanya berupa mouse hover pada website atau interaksi klik pada aplikasi mobile.

Pada tutorial kali ini kita akan menggunakan “data” atribut pada elemen untuk informasi yang akan ditampilkan pada tooltip. Selain itu kita juga akan memanfaatkan fungsi attr() pada CSS3 untuk mengambil nilai dari sebuah atribut yang ada pada elemen.

Baca lebih lengkap mengenai attr() pada css3

Anggap saja kita memiliki sebuah elemen <button> yang mana pada saat elemen ini dihover akan mengeluarkan tooltip sesuai informasi yang kita inginkan.

<button class="tooltip">Info Tooltip</button>

Kita akan menambahkan atribut “data-value” yang akan menampung nilai yang akan kita tampilkan pada tooltip. Maka sekarang tooltip kita akan seperti di bawah ini.

<button class="tooltip" data-value="Ini informasi tooltip nya lo">Info Tooltip</button>

Langkah selanjutnya adalah menerapkan styling pada elemen button di atas. Karena tidak memiliki elemen lain, maka kita bisa memanfaatkan pseudo element dari button untuk bisa menampilkan tooltip.

.tooltip {
  position: relative;
  display: block;
  margin: 0px auto;
  padding: 1rem 2rem;
  font-family: sans-serif;
  text-align: center;
}
.tooltip:hover::after {
  display: block;
}
.tooltip::after {
  display: none;
  content: attr(data-value);
  position: absolute;
  top: 0px;
  left: calc(100% + 1rem);
  background: #333;
  color: #fff;
  font-size: 1rem;
  padding: 1rem;
}

Maka saat ini kita telah berhasil membuat sebuah tooltip dengan hanya memanfaatkan css tanpa bantuan Javascript.

Langkah selanjutnya adalah membuat konfigurasi untuk menampilkan tooltip di atas, bawah, kanan atau kiri. Untuk melakukan ini kita akan menambahkan satu attribute pada button yaitu “data-position”.

<button class="tooltip" data-position="left | right | bottom | top"data-value="Ini informasi tooltip nya lo">Info Tooltip</button>

Selanjutnya kita akan gunakan data-position tadi pada css untuk menentukan posisi dari tooltip.

See the Pen Tooltip With CSS Only1

Demikian tutorial kali ini, semoga bermanfaat

Leave a comment

Your email address will not be published. Required fields are marked *