Popovers adalah sebuah komponen yang bisa digunakan untuk menampilkan informasi terkait suatu komponen. Misalnya ada tombol yang ingin kita tampilkan informasi kegunaannya, informasi kegunaan tombol tersebut bisa kita buat dengan popovers. Informasi mengenai tombol tersebut akan muncul secara otomatis ketika tombol tersebut diklik.
Sebagai contoh kita akan mencoba menerapkan popovers pada sebuah komponen tombol. Jadi pada saat user melakukan klik pada tombol, maka popovers akan tampil untuk menampilkan informasi tertentu sesuai keinginan kita.
Untuk mendukung tutorial ini harus menguasai dulu tentang pembuatan tombol/button dengan Bootstrap, silahkan baca pada tutorial berikut ini https://agussuratna.net/2021/02/16/membuat-button-dan-button-group-dengan-bootstrap/ .
Kemudian kita harus menambahkan file popper.min.js yang dapat didownload di sini. Pada tutorial ini file tersebut di rename menjadi popper.js dan disimpan di dalam folder assets/js pada project yang kita buat, kemudian dihubungkan dengan sintak <script src=”assets/js/popper.js”></script>.
Berikut contoh popovers sederhana :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Popovers Dengan Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<center>
<h3>Tutorial Popovers Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<button type="button"
class="btn btn-primary" data-toggle="popover"
title="Ini tombol warna biru"
data-content="Ini adalah contoh konten informasi tentang tombol dengan popovers">
KLIK SAYA
</button>
</div>
</body>
</html>
Untuk membuat tombol dengan menggunakana bootstrap seperti di atas menggunakan sintak elemen <button> .. </button>. Kemudian kita juga membuat beberapa atribut pada tag <button>. Yaitu elemen data-toggle, title dan data-content.
Atribut data-toggle kita isi dengan “popover“. Atribut title kita isi dengan “Ini tombol warna biru“ dan terakhir atribut data-content kita isi dengan “Ini adalah contoh konten informasi dengan popovers“.
Nah, untuk mengaktifkan popover pada tombol tersebut, kita harus memanggil fungsi popover() dengan javascript.
Buat sintak javascript seperti berikut di bagian paling bawah atau di atas tag penutup </body>.
<script>
$(function (){
$('[data-toggle="popover"]').popover();
});
</script>
Perhatikan perintah javascript di atas, pada bagian selector nya kita isi dengan [data-toggle=”popover”]. Ini bertujuan untuk memilih semua element yang memiliki atribut data-toggle=”popover” akan dikenakan fungsi popover() ini.
Selector yang kita gunakan disini hanya salah satu cara, ada cara lain misalnya seperti memanggil class atau id. Kemudian dilanjutkan dengan fungsi popover() untuk memanggil atau mengaktifkan komponen popovers.
Jadi secara keseluruhan maksud dari perintah di atas adalah ” Jalankan popover pada semua elemen yang memiliki atribut data-toggle=’popover’ “.
Berikut ini hasil dari keseluruhan contoh yang sudah kita buat :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Popovers Dengan Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<center>
<h3>Tutorial Popovers Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
</center>
<button type="button"
class="btn btn-primary" data-toggle="popover"
title="Ini tombol warna biru"
data-content="Ini adalah contoh konten informasi tentang tombol dengan popovers">
KLIK SAYA
</button>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script>
$(function (){
$('[data-toggle="popover"]').popover();
});
</script>
</body>
</html>
Hasilnya :
Pada saat tombol diklik, maka akan muncul informasi tentang tombol tersebut. Informasi yang munculpun sesuai dengan yang kita isi pada atribut title dan atribut data-content pada tombol. Pada contoh ini popover tampil jika tombol diklik dan popover kembali hilang ketika tombol tersebut diklik. Pada tutorial selanjutnya kita akan membuat popover bisa menghilang walaupun diklik dimana saja.
Menutup Popovers Ketika Klik Sembarang lokasi
Jika pada tutorial sebelumnya, popover yang kita buat hanya hilang jika tombol yang menampilkan popover tersebut diklik lagi. Kita juga bisa membuat popover kembali menghilang jika diklik dibagian mana saja.
Caranya kita hanya perlu menambahkan pengaturan trigger: ‘focus’ ke dalam fungsi popover(). Sehingga sekarang fungsi javascript popover menjadi seperti berikut :
<script>
$(function (){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
</script>
Kita coba lihat hasilnya, klik tombol “Klik Saya” dan pada saat popover tampil, kita bisa klik dimana saja untuk menghilangkan popover kembali. Sekarang untuk menghilangkan popover kita tidak perlu lagi melakukan klik pada tombol tersebut, melainkan bisa klik dimana saja dan popover pun langsung menghilang.
Mengubah Posisi Popover
Jika pada contoh sebelumnya popover yang tampil berada disebelah kanan, kita juga bisa memindahkannya sesuai keinginan kita, bisa itu berada di atas, kiri, kanan atau bawah.
Caranya kita bisa langsung menambahkan atribut data-placement=””. Pada atribut data-placement=”” tersebut isi posisi dimana popover ingin kita tampilkan, pilihannya ada 4 yaitu top, bottom, right dan left.
Perhatikan contoh berikut :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>Tutorial Popovers Dengan Bootstrap 4</title>
<link rel="stylesheet" type="text/css" href="assets/css/bootstrap.css">
</head>
<body>
<div class="container-fluid">
<center>
<h3>Tutorial Popovers Dengan Bootstrap 4</h3>
<h4><a href="https://agussuratna.net/">www.agussuratna.net</a></h4>
<br/>
<br/>
<button
type="button"
class="btn btn-primary"
data-toggle="popover"
data-placement="top"
title="Ini tombol warna biru"
data-content="Ini adalah contoh popover yang berada di atas.">
ATAS
</button>
<button
type="button"
class="btn btn-primary"
data-toggle="popover"
data-placement="right"
title="Ini tombol warna biru"
data-content="Ini adalah contoh popover yang berada di kanan.">
KANAN
</button>
<button
type="button"
class="btn btn-primary"
data-toggle="popover"
data-placement="bottom"
title="Ini tombol warna biru"
data-content="Ini adalah contoh popover yang berada di bawah.">
BAWAH
</button>
<button
type="button"
class="btn btn-primary"
data-toggle="popover"
data-placement="left"
title="Ini tombol warna biru"
data-content="Ini adalah contoh popover yang berada di kiri.">
KIRI
</button>
</center>
</div>
<script src="assets/js/jquery.js"></script>
<script src="assets/js/popper.js"></script>
<script src="assets/js/bootstrap.js"></script>
<script>
$(function (){
$('[data-toggle="popover"]').popover({trigger:'focus'});
});
</script>
</body>
</html>
Dan hasilnya seperti berikut :
Demikian tutorial mengenai popovers, semoga bermanfaat. Jika ingin membaca panduan tentang popover langsung dari dokumentasi bootstrap, bisa baca di https://getbootstrap.com/docs/4.3/components/popovers/
Be the first to comment