Popover memang jarang digunakan, tapi setidaknya kita harus mengetahui keberadaannya dan cara membuatnya agar bisa dijadikan referensi ketika membuat sebuah template website. Apa itu Popover ? Popover meruapakan elemen tambahan yang dapat ditampilkan atau disembunyikan ketika suatu tindakan dilakukan (misalnya klik), mirip seperti tooltip.
Popover Bootstrap
Jika membuat website menggunakan Bootstrap, membuat Popover bukanlah hal yang sulit. Kamu dapat menerapkan beberapa class dan script (jika diperlukan) untuk membuat Popover dalam waktu singkat. Ini adalah contoh sederhana Popover Bootstrap, ketika KLIK DISINI di klik maka akan tampil sebuah konten.
Struktur dasar pembuatan Popover sendiri adalah dengan menambahkan atribut data-toggle="namaPopover" pada elemen. Jika mengacu pada contoh di atas, terdapat header dan konten / isi dari Popover. Gunakan title sebagai header dan gunakan data-content”” untuk konten / isi.
<h3>Popover Bootstrap - Posciety.Com</h3> <a href="#" data-toggle="pospop" title="Bagian Header Popover" data-content="Ini adalah bagian konten / isi dari Popover, masukkan milikmu disini !">KLIK DISINI</a>
Gunakan tag a href untuk tombol toggle, sisipkanlah data-toggle”namaPopover” di dalam tag a href tersebut seperti yang dicontohkan pada kode di atas.
Sekarang tombol toggle, header Popover, dan isi konten Popover sudah tersedia, tapi Bootstrap belum dapat memunculkan Popup karena memerlukan bantuan jQuery. Sisipkan script berikut pada halaman bersangkutan (letakkan saja tepat sebelum tag penutup </body>):
<script>
$(document).ready(function(){
$('[data-toggle="pospop"]').popover();
});
</script>
Pastikan nama pada data-toggle=”namaPopover” di script jQuery sama dengan nama data-toggle=”namaPopover” pada tag a href tadi, karena cara kerjanya a href akan membiyarkan data-toggle di dalamnya bekerja untuk memanggil data-toggle pada jQuery.
Posisi Popover Bootstrap
Di atas adalah contoh dari Popover default Bootstrap, dimana posisi popover akan tampil seperti yang terlihat pada gambar. Kamu dapat menentukan posisi Popover ini dengan memanfaatkan data-placement=”” pada a href. Contoh:
<h3>Popover Bootstrap - Posciety.Com</h3> <a href="#" data-toggle="pospop" data-placement="bottom" title="Bagian Header Popover" data-content="Ini adalah bagian konten / isi dari Popover, masukkan milikmu disini !">KLIK DISINI</a>
Terdapat data-placement=”bottom” di dalam a href yang artinya akan menampilkan Popover di bagian bawah a href.
Berikut ini posisi data-placement yang dapat digunakan untuk Popover:
- data-placement=”right”, untuk menampilkan Popover di kanan
- data-placement=”left”, untuk menampilkan Popover di kiri
- data-placement=”top”, untuk menampilkan Popover di atas
- data-placement=”bottom”, untuk menampilkan Popover di bawah
Bagaimana jika tempat untuk menampilkan Popover ini selalu berubah-ubah ? Posisi mana yang tepat untuk menampilkan Popover ? Kamu dapat memanfaatkan data-placement=”auto”, browser akan memutuskan posisi mana yang tepat dan terbaik untuk menampilkan Popover. Contoh: data-placement=”auto bottom”, maka browser akan memutuskan untuk menampilkan Popover di bawah terlebih dahulu jika memungkinkan.
Focus Popover Bootstrap
Secara default, Popover akan tertutup / hilang kembali ketika a href / tombol toggle di klik kedua kalinya. Gunakan data-trigger="focus" agar ketika toggle di klik kedua kali tidak akan menutup Popover. Dengan catatan: Overlay Click tetap aktif, ketika di klik dimanapun (selain di tombol toggle) maka Popover akan menghilang.
<h3>Popover Bootstrap - Posciety.Com</h3> <a href="#" data-toggle="pospop" data-placement="bottom" data-trigger="focus" title="Bagian Header Popover" data-content="Ini adalah bagian konten / isi dari Popover, masukkan milikmu disini !">KLIK DISINI</a>
Popover Bootstrap on Hover
Semua contoh di atas adalah contoh pembuatan Popover dengan tingkah laku klik, ketika toggle di klik maka akan muncul / hilang. Selain itu, kamu juga dapat menampilkan Popover saat di hover (tidak perlu di klik). Ini benar-benar mirip seperti Tooltip.
Gunakan data-trigger="hover" jika ingin menampilkan Popover saat mouse menyentuh area toggle button. Dengan catatan: hapus data-trigger=”focus” karena tidak dapat digunakan bersamaan, ini berlawanan !
<h3>Popover Bootstrap - Posciety.Com</h3> <a href="#" data-toggle="pospop" data-placement="bottom" data-trigger="hover" title="Bagian Header Popover" data-content="Ini adalah bagian konten / isi dari Popover, masukkan milikmu disini !">KLIK DISINI</a>
Simpan dan lihat hasilnya !
Setelah bisa membuat Popover, kamu siap melanjutkan pembuatan website Bootstrap lagi ! Letakkan Popover di posisi yang diinginkan, umumnya ini digunakan pada bagian ikon lonceng sebagai Pemberitahuan / Notification.