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>Langkah 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>Pada 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>Dalam 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>Popover
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!
Leave a Reply