Tutorial Belajar Bootstrap 4 Part 23 – Membuat Popover dengan Bootstrap
Selamat datang di warungbelajar, masih dalam seri tutorial bootstrap 4, dalam tutorial kali ini kita akan membahas cara membuat popover dengan bootstrap, popover memiliki konsep yang sama dengan tooltips, perbedaannya jika tooltips akan ditampilkan ketika ada mouse diatas object tapi untuk popover akan tampil ketika object di klik.
Bootstrap menyediakan fitur untuk membuat popover dengan lebih mudah, untuk popover disini kita juga memerlukan fungsi jquery, nanti kita akan bahas lebih dalam pada tutorial dibawah ini.
Cara Membuat Popover dengan bootstrap 4
Untuk contoh pembuatan popover dengan bootstrap 4, silahkan perhatikan skrip dibawah ini :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 |
<!DOCTYPE html> <html lang="en"> <head> <title>Popover Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Contoh Popover bootstrap</h3> <hr/> <a href="#" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover">Tampil Popover</a> <br/> <br/> <br/> <br/> <button class="btn btn-success" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover" >Tampil Popover</button> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html> |
Semisal kita simpan dengan nama popover_bootstrap.html, lalu kita buka dibrowser maka hasilnya adalah sebagai berikut :
Keterangan :
- untuk membuat popover anda bisa menggunakan object pemicu berupa link ataupun tombol, untuk link perhatikan line (17), untuk tombol perhatikan line (22).
- pada bagian link atau tombol yang dijadikan object pemicu popover, anda perlu menambahkan attribute data-toogle dan memberikan value tertentu, dalam contoh ini berikan value popover, untuk value ini bisa anda ganti dengan value lain.
- selain attribute data-toogle anda juga harus memberikan attribute tittle dan tambahkan value, isi dari attribute ini ditampilkan pada bagian header dari popover
- anda juga harus menambahkan attribute data-content dan berikan value didalamnya, value ini akan ditampilkan pada bagian body dari popover
- setelah kita membuat bagian tombol pemicunya, berikutnya kita akan tambahkan perintah jquery untuk menampilkan popover ketika tombol dan link di klik, perhatikan line 26 – 28, yang perlu anda sesuaikan adalah pada line 27, tuliskan selectornya adalah attribute data-toogle dan value sesuai yang ditulis dibagian link ataupun tombol, dalam hal ini kita menyamakan dengan bagian atas kita tuliskan data-toogle=”popover”
Mengatur posisi popover
Jika dalam tutorial sebelumnya kita telah membahas mengenai bagaimana cara membuat popover dengan boostrap, dalam bagian ini kita belajar mengenai bagaimana cara mengatur posisi popover ketika ditampilkan, kita bisa menggunakan attribute data-placement dengan value (top,right,bottom,left)
untuk contohnya adalah sebagai berikut :
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 |
<!DOCTYPE html> <html lang="en"> <head> <title>Popover Bootstrap</title> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script> </head> <body> <div class="container" style="text-align: center;"> <h3>Contoh Posisi Popover bootstrap</h3> <hr/> <br/> <br/> <button class="btn btn-success" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover" data-placement="top">Popover Atas</button> <br/> <br/> <button class="btn btn-success" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover" data-placement="right">Popover Kanan</button> <br/> <br/> <button class="btn btn-success" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover" data-placement="bottom">Popover Bawah</button> <br/> <br/> <button class="btn btn-success" data-toggle="popover" title="Header Popover" data-content="Text didalam body popover" data-placement="left">Popover Kiri</button> <br/> <br/> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html> |
Semisal kita simpan dengan nama posisi_popover.html, lalu kita buka di browser maka hasilnya adalah sebagai berikut :
Keterangan :
- untuk mengatur posisi dari popover ketika ditampilkan anda hanya perlu menambahkan attribute data-placement, untuk value attribute data-placement bisa top(atas), right (kanan), bottom (bawah), left (kiri).
Baik sekian dulu teman – teman pembahasan mengenai bagaimana cara membuat popover dengan menggunakan bootstrap 4, jika ada yang ingin didiskusikan silahkan di kolom komentar, sekian dulu sampai jumpa di tutorial selanjutnya.
rupanya ini yang dinamakan popper. terimakasih banyak mas..
ya mas sama sama 😀