Cara Membuat Tooltip Bootstrap

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:

gambar 1 - contoh tooltip bootstrap

Tooltip memerlukan jQuery agar dapat bekerja dengan baik, gunakan script berikut pada halaman bersangkutan:

<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 !

tunggu sebentar...

POS Lainnya:

1
Tinggalkan Komentar

avatar
trackback
Apa Itu Popover ? Bagaimana Cara Membuatnya di Bootstrap ?

[…] Semua contoh di atas adalah contoh pembuatan Popover dengan tingkah laku klik, ketika toggle di klik maka akan muncul / hilang. Selain itu, kamu juga dapat menampilkan Popover saat di hover (tidak perlu di klik). Ini benar-benar mirip seperti Tooltip. […]

Situs ini menggunakan Cookie untuk meningkatkan pengalaman setiap pengunjung SETUJU & TUTUP Lihat Privasi