Membuat Bootstrap Popover

Membuat Bootstrap Popover

popover ini mirip dengan tooltip, menawarkan pemandangan diperpanjang lengkap dengan pos. Untuk popover untuk mengaktifkan, pengguna hanya perlu membawa kursor di atas elemen. 

Isi popover yang dapat diisi seluruhnya menggunakan Bootstrap data API. Metode ini membutuhkan tooltip. 
 

Jika Anda ingin menyertakan fungsi plugin ini secara individual, maka Anda akan perlu yang popover.js dan memiliki ketergantungan plugin tooltip. Lain, seperti yang disebutkan dalam bab Ikhtisar Bootstrap Plugins, Anda dapat menyertakan bootstrap.js atau bootstrap.min.js minified. 

 

Cara pemakaian Bootstrap Popover

Popover Plugin menghasilkan konten dan markup pada permintaan, dan secara default tempat popover setelah elemen pemicu mereka.

Anda dapat menambahkan popover, berikut ini ada 2 cara pemakaian Bootstrap Popover :

1. Melalui Data atribut: Untuk menambahkan popover, menambahkan data-toggle = "popover" untuk tag anchor / tombol. Judul jangkar akan menjadi teks popover. Secara default, popover diatur ke atas oleh plugin. <a href="#" data-toggle="popover" title="Example popover"> Hover over me </a>. 
2. Melalui JavaScript: Aktifkan popovers melalui JavaScript menggunakan berikut sintaknya: $('#identifier').popover(options)

Popover plugin tidak hanya css plugin seperti dropdown atau plugin lain yang dibahas di artkel-artikel sebelumnya. 

Untuk menggunakan plugin ini Anda harus mengaktifkannya menggunakan jquery (baca javascript). Untuk mengaktifkan semua popovers pada halaman Anda hanya menggunakan script ini: $(function () { $("[data-toggle='popover']").popover(); }); 

Script atau kode Bootstrap Popover Plugin

Contoh berikut menunjukkan penggunaan popover plugin dengan data atribut

<div class="container" style="padding: 100px 50px 10px;" >
<button type=" button " class=" btn btn-default " title=" Popover title " data-container=" body " data-toggle="popover" data-placement=" left " data-content=" Some content in Popover on left "> Popover on left </button>
<button type=" button " class=" btn btn-primary " title=" Popover title " data-container=" body " data-toggle=" popover " data-placement=" top " data-content=" Some content in Popover on top "> Popover on top </button>
<button type=" button " class=" btn btn-success" title="Popover title" data-container="body" data- toggle=" popover " data-placement=" bottom " data-content=" Some content in Popover on bottom"> Popover on bottom </button>
<button type=" button " class="btn btn-warning" title="Popover title" data-container="body" data-toggle=" popover " data-placement=" right " data-content=" Some content in Popover on right"> Popover on right </button>
</div>
<script>
$(function ()
{ $("[data-toggle='popover']").popover();
});
</script>
</div>