Pada pembahasan kali ini kita akan membahas mengenai sebuah utilitas yang dimiliki oleh bootstrap yaitu Popover.
Popover adalah komponen yang mirip dengan komponen bootstrap lain yaitu tooltips. Komponen ini akan memunculkan pesan pesan pop up ketika pengguna melakukan aksi klik ke sebuah element. Perbedaan antara popover dengan tooltip adalah popover dapat berisi lebih banyak konten dibanding dengan tooltip.
Ada beberapa hal yang harus diperhatikan dalam penggunaan popover, diantaranya:
- Popover menggunakan pustaka pihak ke 3 yaitu
popper.jsuntuk memposisikannya. Oleh karena itu kita harus menyertakan library popper.min.js sebelum bootstrap.js atau menggunakan bundle bootstrap.bundle.min.js / bootstrap.bundle.js yang berisi popper.js agar popover dapat berfungsi - Jika popover tidak memiliki judul atau konten didalamnya maka tidak akan menampilkan popover.
- Jika kita memicu / meletakkan popover pada elemen yang tersembunyi, hal ini tidak akan berfungsi
Section Artikel
Basic Popover Bootstrap
Untuk membuat popover kita hanya menambahakan attribute data-toggle="popover" ke elemen yang akan dibuat sebagai trigernya (biasanya tag <a> atau <button>).
Pada popover juga kita dapat membuat sebuah title untuk konten yang akan tampil. Nah untuk melakukan hal ini kita kita menggunakan attribute title. Sedangkan konten yang akan tampil dalam body nya dimasukkan dalam attribute data-content="pesan yang tampil".
Popover harus diinisialisasi dengan JQuery cara nya : pilih elemen yang akan digunakan (disini saya memasukkan data-toggle="popover").
Contoh basic atau dasar Popover Bootstrap:
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover dengan tag a</h3> <a href="#" data-toggle="popover" title="Judul Popover" data-content="ini adalah isi popover">Klik aku</a> </div> <div class="container"> <h3>Popover dengan tag button</h3> <button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Judul popover" data-content="Ini juga adalah isi dari popover">Klik aku juga</button> </div> <!-- dibawah merupakan jquery untuk triger popover --> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>
Posisi Popover
Posisi dari popover bootstrap dapat kita atur dengan menggunakan attribute data-placement="posisi". Posisi yang dapat mengisi attribut tersebut adalah top, left, bottom, dan right. meskipun secara default ketika kita membuat popover maka konten akan tampil pada posisi kanan.
Peringatan: Attribute data-placement="" tidak akan berguna atau berefek jika tidak ada ruang yang tersedia untuk menampilkan popover pada posisi yang diiinginkan.
Contoh programnya
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>hilangkan tulisan "x" untuk melihat hasil saat popover tidak memiliki ruang untuk tampil. </p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="ini isi konten.">
Popover kanan
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="ini isi konten.">
Popover atas
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="ini isi konten.">
Popover bawah
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="ini isi konten.">
Popover kiri
</button>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
<p>hilangkan tulisan "x" untuk melihat hasil saat popover tidak memiliki ruang untuk tampil. </p>
<p>xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx</p>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>Menutup Popover
Secara default popover akan menutup ketika kita kembali men-klik element triger. Bagaimana jika kita ingin bisa menutup jika klik di sembarang tempat pada halaman web ? untuk ini kita gunakan attribute data-trigger="focus", yang akan menutup popover ketika kita melakukan klik di luar element.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</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.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
</head>
<body>
<div class="container">
<h3>Popover Example</h3>
<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>
</div>
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>Selain itu kita juga dapat membuat popover tanpa harus melakukan klik pada element yaitu hanya dengan mengarahkan kurson pada element atau istilahnya “hover“. Untuk melakukan hal tersebut kita hanya perlu menambahkan atribute data-trigger="hover" kedalam element popover.
<!DOCTYPE html> <html lang="en"> <head> <title>Bootstrap Example</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.5.2/css/bootstrap.min.css"> <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script> </head> <body> <div class="container"> <h3>Popover</h3> <a href="#" title="Header" data-toggle="popover" data-content="Some content">Click Me</a><br> <a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a> </div> <script> $(document).ready(function(){ $('[data-toggle="popover"]').popover(); }); </script> </body> </html>
Sekian penjelasan mengenai popover bootstrap dari saya semoga bisa dikembangkan oleh teman – teman sesuai kebutuhan. Terima kasih
