Popover adalah salah satu komponen yang disediakan oleh Bootstrap 5 untuk menampilkan konten tambahan saat pengguna mengarahkan kursor ke suatu elemen. Dalam artikel ini, kita akan belajar bagaimana membuat popover dengan menggunakan Bootstrap 5 dan menerapkannya pada HTML.
Langkah 1: Menambahkan Dependensi Bootstrap
Pertama, kita perlu menambahkan dependensi Bootstrap ke dalam proyek HTML kita. Kita dapat melakukannya dengan menambahkan kode berikut di dalam tag <head>
:
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
JavaScriptLangkah 2: Membuat Elemen Target
Selanjutnya, kita perlu membuat elemen target yang akan menampilkan popover saat kursor diarahkan kepadanya. Misalnya, kita akan menggunakan tombol sebagai elemen target. Berikut adalah contoh kode HTML untuk membuat tombol:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="Ini adalah konten popover.">Tombol Popover</button>
HTMLPada kode di atas, kita menggunakan atribut data-bs-toggle="popover"
untuk menandai bahwa elemen ini akan menampilkan popover. Atribut title
digunakan untuk menentukan judul popover, sedangkan atribut data-bs-content
digunakan untuk menentukan konten popover.
Langkah 3: Inisialisasi Popover
Terakhir, kita perlu menginisialisasi popover menggunakan JavaScript. Kita dapat melakukannya dengan menambahkan kode berikut di dalam tag <script>
:
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
JavaScriptDalam kode di atas, kita menggunakan querySelectorAll
untuk memilih semua elemen dengan atribut data-bs-toggle="popover"
. Kemudian, kita menggunakan map
untuk menginisialisasi popover pada setiap elemen target.
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
</head>
<body>
<div class="container mt-3">
<h3>Popover</h3>
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Title" data-bs-content="Ini adalah konten popover.">Tombol Popover</button>
<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>
HTMLPopover
Kesimpulan
Dengan mengikuti langkah-langkah di atas, kita dapat membuat popover dengan menggunakan Bootstrap 5 dan menerapkannya pada HTML. Popover ini akan muncul saat pengguna mengarahkan kursor ke elemen target yang telah ditentukan.
Jadi, mari kita mulai membuat popover yang interaktif dan menarik dengan menggunakan Bootstrap 5!