Bootstrap 4 Popover
Bootstrap 4 Popover
Komponen Popover mirip dengan tooltips; itu adalah kotak pop-up yang muncul ketika pengguna mengklik sebuah elemen. Perbedaannya adalah popover dapat berisi lebih banyak konten.
Alihkan popoverCara Membuat Popover
Untuk membuat popover, tambahkan data-toggle="popover"
atribut ke elemen.
Gunakan titleatribut untuk menentukan teks header popover, dan gunakan data-contentatribut untuk menentukan teks yang harus ditampilkan di dalam isi popover:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Catatan: Popover harus diinisialisasi dengan jQuery: pilih elemen yang ditentukan dan panggil popover()metodenya.
Kode berikut akan mengaktifkan semua popover dalam dokumen:
Contoh
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Memposisikan Popovers
Secara default, popover akan muncul di sisi kanan elemen.
Gunakan data-placementatribut untuk mengatur posisi popover di atas, bawah, kiri atau kanan elemen:
Contoh
<a href="#" title="Header" data-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</a>
Catatan: Atribut penempatan tidak berfungsi seperti yang Anda harapkan jika tidak cukup ruang untuk mereka. Misalnya: jika Anda menggunakan penempatan teratas di bagian atas halaman (di mana tidak ada ruang untuk itu), itu akan menampilkan popover di bawah elemen atau ke kanan (di mana pun ada ruang untuk itu).
Menutup Popover
Secara default, popover ditutup ketika Anda mengklik elemen lagi. Namun, Anda dapat menggunakan data-trigger="focus"atribut yang akan menutup popover saat mengklik di luar elemen:
Contoh
<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Tip: Jika Anda ingin popover ditampilkan saat Anda menggerakkan pointer mouse ke atas elemen, gunakan data-triggeratribut dengan nilai "hover":
Contoh
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
Referensi Popover Bootstrap Lengkap
Untuk referensi lengkap tentang semua opsi, metode, dan acara popover, buka Referensi Popover Bootstrap JS kami .