Bootstrap - Popovers: Panduan Pemula

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

Bootstrap - Popovers

Apa Itu Popovers?

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

Mengaktifkan Popovers

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

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

<!DOCTYPE html>
<html lang="en">
<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 telah mengatur panggung, mari kita buat popover pertama kita! Itu 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. Itu sangat menarik. Betul?">Klik untuk toggle popover</button>

mari kitauraikan ini:

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

Posisi Popover

Seperti mengatur furnitur di ruangan, 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 di kontenpopover. Sekarang kita dapat menggunakan tag HTML di judul dan konten!

Popover yang Dapat Ditutup

kadang-kadang, Anda ingin popover Anda tetap ada 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. Itu sangat menarik. Betul?">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.

Hovering Popover

Ingin agar popover Anda muncul saat pengguna melayang 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="Melayang di atas saya!">
Melayang untuk memicu popover
</button>

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

Popover di Elemen Non-Aktif

Biasanya, elemen non-aktif 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 non-aktif">
<button class="btn btn-primary" type="button" disabled>Tombol non-aktif</button>
</span>

Kita membungkus tombol non-aktif di dalam <span> yang menghandle pemicupopover.

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	Izinkan HTML di popover
placement	string \| function	'right'	Bagaimana menempatkan popover
selector	string \| false	false	Jika penyaring diberikan, objekpopover 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>`	HTML dasar 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 ahli Bootstrap Popover. Ingat, kunci untuk menguasai ini (dan konsep coding apa pun) adalah latihan. Jadi, teruskan, mainkan dengan contoh ini, campurkan dan gabungkan, dan buat sesuatu yang menakjubkan. Selamat coding!

Credits: Image by storyset

Tutorial Sebelumnya:

Bootstrap - Placeholder

Tutorial Seterusnya:

Bootstrap - Baris kemajuan