Bootstrap - Popovers: Panduan untuk Pemula

Halo sana, para pengembang web yang bersemangat! Hari ini, kita akan melihat dunia yang menakjubkan Bootstrap Popovers. Jangan khawatir jika Anda baru dalam hal ini; saya akan memandu Anda di setiap langkah dengan kesabaran yang saya gunakan di kelas selama tahun. Pada akhir panduan ini, Anda akan dapat membuat popovers seperti seorang pro!

Bootstrap - Popovers

Apa Itu Popovers?

Sebelum kita masuk ke detil, mari kita pahami apa itu popovers. Bayangkan Anda membaca buku, dan ada tanda bintang kecil di sebelah kata. Ketika Anda melihat bagian bawah halaman, Anda akan menemukan informasi tambahan tentang kata itu. Itu sebenarnya apa yang dilakukan popover di halaman web – menyediakan informasi tambahan saat pengguna berinteraksi dengan elemen.

Mengaktifkan Popovers

Pertama-tama, kita perlu mengaktifkan popovers. Hal ini seperti menyalakan lampu sebelum Anda mulai membaca – Anda perlu mengatur hal-hal sebelum Anda dapat menggunakannya.

Untuk mengaktifkan popovers, Anda perlu menyertakan file JavaScript dan CSS Bootstrap di dokumen HTML Anda. Berikut cara Anda melakukannya:

<!DOCTYPE html>
<html lang="id">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Bootstrap Popovers</title>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
</head>
<body>
<!-- Isi Anda disini -->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
</body>
</html>

Kode ini mengatur struktur dasar dokumen HTML dan menyertakan file CSS dan JavaScript Bootstrap. Skrip di bagian bawah menginisialisasi semua popovers di halaman.

Membuat Popover

Sekarang kita sudah menyiapkan panggung, mari kita buat popover pertama kita! Ini sama mudahnya menambahkan beberapa atribut ke tombol.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Judul Popover" data-bs-content="Dan ini adalah konten yang menakjubkan. Apakah benar?">Klik untuk menampilkan/menyembunyikan popover</button>

mari kitauraikan ini:

class="btn btn-lg btn-danger": Ini membuat tombol kita besar dan merah.
data-bs-toggle="popover": Ini memberitahu Bootstrap bahwa elemen ini harus memicu popover.
title="Judul Popover": Ini menentukan judulpopover kita.
data-bs-content="...": Ini adalah konten utama popover kita.

Penempatan Popover

Seperti mengatur furniture di dalam kamar, Anda dapat menempatkan popover Anda dalam berbagai cara. Bootstrap memungkinkan Anda menempatkan popovers di atas, kanan, bawah, atau kiri elemen.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Popover di atas">
Popover di atas
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Popover di kanan">
Popover di kanan
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Popover di bawah">
Popover di bawah
</button>

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Popover di kiri">
Popover di kiri
</button>

Atribut data-bs-placement menentukan di mana popover muncul relatif terhadap tombol.

Popovers Khusus

Ingin menambahkan sentuhan pribadi ke popovers Anda? Anda dapat menyesuaikan mereka dengan konten HTML Anda sendiri!

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-html="true" title="<h3>Judul Khusus</h3>" data-bs-content="<b>Tebal</b> konten. <a href='#'>Tautan</a> termasuk.">
Popover HTML Khusus
</button>

Di sini, kita mengatur data-bs-html="true" untuk mengijinkan HTML dalam konten popover. Sekarang kita dapat menggunakan tag HTML dalam judul dan konten!

Popover yang Dapat Ditutup

kadang-kadang, Anda ingin popover Anda tetap terlihat sampai pengguna secara eksplisit menutupnya. Itu di mana popovers yang dapat ditutup berguna.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Popover yang dapat ditutup" data-bs-content="Dan ini adalah konten yang menakjubkan. Apakah benar?">Popover yang dapat ditutup</a>

Kunci di sini adalah data-bs-trigger="focus". Ini berarti popover akan tetap terbuka sampai pengguna mengklik di tempat lain di halaman.

Muncul Popover saat Hover

Ingin agar popover Anda muncul saat pengguna menghover di atas elemen? Sangat mudah!

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-placement="top" data-bs-content="Hover di atas saya!">
Hover untuk memicu popover
</button>

Atribut data-bs-trigger="hover" membuat popover muncul saat pengguna menghover.

Popover di Elemen Nonaktif

Biasanya, elemen yang dinonaktifkan tidak memicu interaksi pengguna. Tetapi dengan trik kecil, kita dapat membuat popovers bekerja di atas mereka juga!

<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Popover dinonaktifkan">
<button class="btn btn-primary" type="button" disabled>Tombol dinonaktifkan</button>
</span>

Kita membungkus tombol yang dinonaktifkan di dalam <span> yang mengelola pemicu popover.

Opsi

Bootstrap menyediakan berbagai opsi untuk menyesuaikan popovers Anda. Berikut adalah tabel dari beberapa opsi umum:

Opsi	Tipe	Default	Deskripsi
animation	boolean	true	Terapkan transisi CSS fade ke popover
container	string \| element \| false	false	Menambahkan popover ke elemen tertentu
content	string \| element \| function	''	Nilai konten default jika atribut `data-bs-content` tidak ada
delay	number \| object	0	Delay menampilkan dan menyembunyikan popover (ms)
html	boolean	false	Ijinkan HTML di dalam popover
placement	string \| function	'right'	Bagaimana menempatkan popover
selector	string \| false	false	Jika penyaring diberikan, objek popover akan didelegasikan ke target yang ditentukan
template	string	`<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>`	Base HTML yang digunakan saat membuat popover
title	string \| element \| function	''	Nilai judul default jika atribut `title` tidak ada
trigger	string	'click'	Bagaimana popover dipicu - click \| hover \| focus \| manual

Anda dapat menggunakan opsi ini saat menginisialisasi popovers dengan JavaScript:

var popover = new bootstrap.Popover(document.querySelector('#example'), {
trigger: 'hover',
placement: 'top'
})

Dan itu saja! Anda sekarang adalah seorang pro Bootstrap Popover. Ingat, kunci untuk menguasai ini (dan konsep pemrograman lainnya) adalah latihan. Jadi, teruskan, mainkan dengan contoh ini, campur dan gabungkan, dan buat sesuatu yang menakjubkan. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Placeholder

Tutorial Selanjutnya:

Bootstrap - Progres