Plugin Tooltip Bootstrap
Plugin Tooltip
Plugin Tooltip adalah kotak pop-up kecil yang muncul saat pengguna menggerakkan penunjuk mouse ke elemen:
Tip: Plugin dapat dimasukkan satu per satu (menggunakan file "tooltip.js" individual Bootstrap), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js").
Cara Membuat Tooltip
Untuk membuat tooltip, tambahkan data-toggle="tooltip"
atribut ke elemen.
Gunakan titleatribut untuk menentukan teks yang harus ditampilkan di dalam tooltip:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Catatan: Tooltips harus diinisialisasi dengan jQuery: pilih elemen yang ditentukan dan panggil tooltip()metodenya.
Kode berikut akan mengaktifkan semua tooltips dalam dokumen:
Contoh
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Tip Alat Pemosisian
Secara default, tooltip akan muncul di atas elemen.
Gunakan data-placementatribut untuk mengatur posisi tooltip di atas, bawah, kiri atau kanan elemen:
Contoh
<a href="#" data-toggle="tooltip" data-placement="top" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip" data-placement="right" title="Hooray!">Hover</a>
Tip: Anda juga dapat menggunakan data-placementatribut dengan nilai " auto", yang memungkinkan browser menentukan posisi tooltip. Misalnya, jika nilainya adalah " auto left", tooltip akan ditampilkan di sisi kiri jika memungkinkan, sebaliknya di kanan.
Referensi Tooltip Bootstrap Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan acara tooltip, buka Referensi Tooltip Bootstrap JS kami .