Tooltip adalah sebuah popup kecil yang muncul pada suatu elemen, umumnya menampilkan informasi dari elemen terkait. Beberapa situs menggunakan Tooltip pada ikon informasi, sehingga ketika visitor mengklik / hover ikon informasi tersebut akan menampilkan sebuah konten berupa popup mini.
Cara kerjanya tidak berbeda jauh dengan Popover, tapi Tooltip ini lebih sederhana dalam pembuatannya. Untuk membuat Tooltip, gunakan data-toggle="tooltip" dan gunakan title sebagai isi dari Tooltip. Contoh: <a href="#" data-toggle="tooltip" title="Ini adalah isi/konten dari Tooltip">Hover DISINI</a> maka hasilnya akan terlihat seperti ini:
Tooltip memerlukan jQuery agar dapat bekerja dengan baik, gunakan script berikut pada halaman bersangkutan:
Baca Juga:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Pastikan pada bagian data-toggle diisi sama dengan data-toggle yang ada pada teks !
Posisi Tooltip
Sama seperti Popover Bootstrap, kamu dapat mengatur dimana posisi popup Tooltip ingin ditampilkan dengan menggunakan data-placement.
- data-placement=”top”, untuk menampilkan popup di bagian atas teks
- data-placement=”bottom”, untuk menampilkan popup di bagian bawah teks
- data-placement=”right”, untuk menampilkan popup di bagian kanan teks
- data-placement=”left”, untuk menampilkan popup di bagian kiri teks
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Ini adalah isi/konten dari Tooltip">Hover DISINI</a>
Kamu juga dapat menggunakan auto jika ingin membiarkan browser yang memutuskan posisi terbaik dimana popup Tooltip di tampilkan, ini sangat bermanfaat jika kamu menampilkan Tooltip di area yang sempit. Contoh: data-placement="auto right" maka browser akan menampilkan popup di sisi kanan jika memungkinkan, jika tidak, ia akan menampilkan di posisi lain.
Sekarang, kamu sudah bisa membuat teks yang menampilkan teks lagi ketika di hover menggunakan Bootstrap Tooltip !