The Popover Plugin
The Popover Plugin ini mirip dengan tooltips; itu adalah kotak pop-up yang muncul saat pengguna mengklik pada sebuah elemen. Perbedaannya adalah bahwa popover dapat berisi konten lebih.
Tip: Plugin dapat dimasukkan secara individual (menggunakan Bootstrap's individu "popover.js" file), atau sekaligus (menggunakan "bootstrap.js" atau "bootstrap.min.js" ).
Cara Membuat Popover
Untuk membuat popover , menambahkan data-toggle="popover" atribut untuk elemen.
Gunakan title atribut untuk menentukan judul teks dari popover, dan menggunakan data-content atribut untuk menentukan teks yang harus ditampilkan dalam popover's tubuh:
<a href="#" data-toggle="popover" title=" Popover
Header" data-content="Some
content inside the popover">Toggle popover</a> Catatan: Popovers harus diinisialisasi dengan jQuery: pilih elemen tertentu dan memanggil popover() metode.
Kode berikut akan memungkinkan semua popovers dalam dokumen:
Contoh
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Cobalah sendiri " positioning Popovers
Secara default, popover akan muncul di sisi kanan dari elemen.
Gunakan data-placement atribut untuk mengatur posisi popover di atas, bawah, kiri atau sisi 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>
Cobalah sendiri " Tip: Anda juga dapat menggunakan data atribut-penempatan dengan nilai "auto" , yang akan membiarkan browser menentukan posisi popover . Misalnya, jika nilai "auto left" , yang popover akan ditampilkan pada sisi kiri bila mungkin, jika di sebelah kanan.
menutup Popovers
Secara default, popover ditutup ketika Anda mengklik pada elemen lagi. Namun, Anda dapat menggunakan data-trigger="focus" atribut yang akan menutup popover saat mengklik 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>
Cobalah sendiri " Tip: Jika Anda ingin popover yang akan ditampilkan ketika Anda memindahkan pointer mouse di atas elemen, menggunakan data-trigger atribut dengan nilai "hover" :
Contoh
<a href="#" title="Header" data-toggle="popover"
data-trigger="hover" data-content="Some content">Hover
over me</a>
Cobalah sendiri " Menyelesaikan Bootstrap Popover Referensi
Untuk referensi lengkap semua popover pilihan, metode dan peristiwa, pergi ke kami Bootstrap JS Popover Referensi .