Plugin Popover Bootstrap
Plugin Popover
Plugin Popover mirip dengan tooltips; itu adalah kotak pop-up yang muncul ketika pengguna mengklik sebuah elemen. Perbedaannya adalah popover dapat berisi lebih banyak konten.
Tip: Plugin dapat dimasukkan satu per satu (menggunakan file "popover.js" individual Bootstrap), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js").
Cara 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>
Tip: Anda juga dapat menggunakan atribut penempatan data dengan nilai "otomatis", yang akan memungkinkan browser menentukan posisi popover. Misalnya, jika nilainya "kiri otomatis", popover akan ditampilkan di sisi kiri jika memungkinkan, sebaliknya di kanan.
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 .