Boks keluar Bootstrap 5

Pop-up

Komponen Pop-up (Popover) mirip dengan ToolTip; ini adalah tampilan pop-up yang muncul saat pengguna mengklik elemen. Perbedaan utamanya adalah pop-up dapat mengandung konten yang lebih banyak.

Cara membuat pop-up

Untuk membuat pop-up, silakan gunakan data-bs-toggle="popover" menambahkan properti ke elemen.

Gunakan title Properti menentukan teks judul pop-up, dan digunakan data-bs-content Properti menentukan teks yang ditampilkan di konten pop-up:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Judul pop-up" data-bs-content="Beberapa konten di dalam pop-up">Toggles pop-up</button>

Note:Pop-up harus diinisialisasi dengan JavaScript untuk dapat beroperasi.

Berikut kode akan mengaktifkan semua pop-up di dokumen:

Example

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

Try It Yourself

Penempatan pop-up

Secara default, pop-up akan muncul di sisi kanan elemen.

Gunakan data-bs-placement Pengaturan posisi tampilan pop-up di atas, bawah, kiri, atau kanan elemen:

Example

<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="Content">Left</a>
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>

Try It Yourself

Note:If there is not enough space, the placement property will not work as expected. For example: if you use the top placement property at the top of the page (no reserved space), it will instead display the popover below or to the right of the element (anywhere there is space).

Close Popover

By default, the popover will close when the element is clicked again. However, you can use data-bs-trigger="focus" Property, setting this property can close the popover when clicked outside the element:

Example

<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click Me</a>

Try It Yourself

Hover Popover

Tip:If you want the popover to appear when the mouse pointer is moved over the element, use the value "hover" of data-bs-trigger Property:

Example

<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me above</a>

Try It Yourself