Bootstrap 5 Pop-up

Tombol pop-up

Tombol pop-up (Popover) komponen serupa dengan tool tip; ia adalah tombol pop-up yang muncul saat pengguna mengklik elemen. Perbezaannya adalah tombol pop-up dapat mengandung lebih banyak konten.

Bagaimana untuk membuat tombol pop-up

Untuk membuat tombol pop-up, taruh data-bs-toggle="popover" menambah properti ke elemen.

Gunakan title Properti menentukan teks tajuk tombol pop-up, dan digunakan data-bs-content Properti menentukan teks yang ditampilkan dalam teks pop-up:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Tajuk tombol pop-up" data-bs-content="Beberapa konten dalam tombol pop-up">Togel tombol pop-up</button>

Perhatian:Tombol pop-up mesti diinisialisasi dengan JavaScript untuk beroperasi.

Kod berikut akan mengaktifkan semua tombol pop-up dalam dokumen:

Contoh

<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})
</script>

Coba Diri Sendiri

Lokasi tombol pop-up

Secara lalai, tombol pop-up akan muncul di sebelah kanan elemen.

Gunakan data-bs-placement Tetapan lokasi tombol pop-up di atas, bawah, kiri atau kanan elemen:

Contoh

<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Atas</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bawah</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Konten">Kiri</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Konten">Kanan</a>

Coba Diri Sendiri

Perhatian:Jika tidak ada ruang yang cukup, atribut placement akan tidak bekerja seperti yang diharapkan. Misalnya: jika anda menggunakan atribut placement top di atas halaman (tanpa ruang cadangan), dia akan berubah untuk menampilkan kotak pop-up di bawah atau di sebelah kanan (di mana saja ada ruang).

Tutup Kotak Pop-up

Secara lalai, jendela pop-up akan ditutup saat diklik lagi di elemen. Tetapi, anda dapat menggunakan data-bs-trigger="focus" Atribut, atur atribut ini untuk menutup jendela pop-up saat diklik di luar elemen:

Contoh

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Klik mana saja di dokumen untuk menutup jendela pop-up ini">Klik Saya</a>

Coba Diri Sendiri

Kotak Pop-up Susun

Petunjuk:Jika anda ingin menampilkan kotak pop-up saat kursor mouse diarahkan ke elemen, gunakan nilai "hover" dari data-bs-trigger Atribut:

Contoh

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Teks Pop-up">Tunggu Di Atas</a>

Coba Diri Sendiri