Cara Membuat Tooltip Bootstrap

0

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 !

SUBSCRIBE
Subscribe sekarang dan dapatkan update terbaru melalui email
aman dari spam
Pos Lainnya

Komentar

Email kamu tidak akan dibagikan kepada siapapun

Website ini menggunakan cookie untuk pengalaman yang lebih baik Setuju & Tutup Selengkapnya