Bootstrap 4 Tooltip
Bootstrap 4 Tooltip
Komponen Tooltip adalah kotak pop-up kecil yang muncul saat pengguna menggerakkan penunjuk mouse ke atas suatu elemen:
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>
Referensi Tooltip Bootstrap Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan acara tooltip, buka Referensi Tooltip Bootstrap JS kami .