Popover

Dokumentasi dan contoh untuk menambahkan popover Bootstrap, seperti yang ditemukan di iOS, ke elemen apa pun di situs Anda.

Ringkasan

Hal-hal yang perlu diketahui saat menggunakan plugin popover:

• Popover mengandalkan perpustakaan pihak ke-3 Popper untuk penentuan posisi. Anda harus menyertakan popper.min.js sebelum bootstrap.js atau menggunakan bootstrap.bundle.min.js/bootstrap.bundle.js yang berisi Popper agar popover berfungsi!
• Popover memerlukan plugin tooltip sebagai ketergantungan.
• Jika Anda membuat JavaScript kami dari sumber, itu memerlukanutil.js .
• Popover diikutsertakan karena alasan kinerja, jadi Anda harus menginisialisasinya sendiri .
• Panjang nol titledan contentnilai tidak akan pernah menampilkan popover.
• Menentukancontainer: 'body' untuk menghindari masalah rendering dalam komponen yang lebih kompleks (seperti grup input, grup tombol, dll.).
• Memicu popover pada elemen tersembunyi tidak akan berfungsi.
• Popover untuk .disabledataudisabled elemen harus dipicu pada elemen pembungkus.
• Saat dipicu dari jangkar yang membungkus beberapa garis, popover akan dipusatkan di antara lebar keseluruhan jangkar. Gunakan .text-nowrapdi <a>s Anda untuk menghindari perilaku ini.
• Popover harus disembunyikan sebelum elemen terkaitnya dihapus dari DOM.
• Popover dapat dipicu berkat elemen di dalam shadow DOM.

Teruslah membaca untuk melihat bagaimana popover bekerja dengan beberapa contoh.

Contoh: Aktifkan popover di mana-mana

Salah satu cara untuk menginisialisasi semua popover pada halaman adalah dengan memilihnya berdasarkan data-toggleatributnya:

$(function () {
  $('[data-toggle="popover"]').popover()
})

Contoh: Menggunakan containeropsi

Saat Anda memiliki beberapa gaya pada elemen induk yang mengganggu popover, Anda akan ingin menentukan kustom containersehingga HTML popover muncul di dalam elemen itu.

$(function () {
  $('.example-popover').popover({
    container: 'body'
  })
})

Contoh

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Empat arah

Tersedia empat opsi: rata atas, kanan, bawah, dan kiri.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Left popover">
  Popover on left
</button>

Singkirkan pada klik berikutnya

Gunakan focuspemicu untuk menghilangkan popover pada klik berikutnya pengguna dari elemen yang berbeda dari elemen sakelar.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

$('.popover-dismiss').popover({
  trigger: 'focus'
})

Elemen yang dinonaktifkan

Elemen dengan disabledatribut tidak interaktif, artinya pengguna tidak dapat mengarahkan atau mengkliknya untuk memicu popover (atau tooltip). Sebagai solusinya, Anda ingin memicu popover dari pembungkus <div>atau <span>dan menimpa pointer-eventselemen yang dinonaktifkan.

Untuk pemicu popover yang dinonaktifkan, Anda juga dapat memilih data-trigger="hover"agar popover muncul sebagai umpan balik visual langsung kepada pengguna Anda karena mereka mungkin tidak mengharapkan untuk mengklik elemen yang dinonaktifkan.

<span class="d-inline-block" data-toggle="popover" data-content="Disabled popover">
  <button class="btn btn-primary" style="pointer-events: none;" type="button" disabled>Disabled button</button>
</span>

Penggunaan

Aktifkan popover melalui JavaScript:

$('#example').popover(options)

Popper.Defaults.modifiers.computeStyle.gpuAcceleration = !(window.devicePixelRatio < 1.5 && /Win/.test(navigator.platform))

Pilihan

Opsi dapat diteruskan melalui atribut data atau JavaScript. Untuk atribut data, tambahkan nama opsi ke data-, seperti pada data-animation="".

Metode

$().popover(options)

Menginisialisasi popover untuk koleksi elemen.

.popover('show')

Mengungkapkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan (yaitu sebelum shown.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover. Popover yang judul dan kontennya sama-sama panjangnya nol tidak pernah ditampilkan.

$('#element').popover('show')

.popover('hide')

Menyembunyikan popover elemen. Kembali ke pemanggil sebelum popover sebenarnya disembunyikan (yaitu sebelum hidden.bs.popoveracara terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

$('#element').popover('hide')

.popover('toggle')

Mengalihkan popover elemen. Kembali ke pemanggil sebelum popover benar-benar ditampilkan atau disembunyikan (yaitu sebelum shown.bs.popoveratau hidden.bs.popoverperistiwa terjadi). Ini dianggap sebagai pemicu "manual" dari popover.

$('#element').popover('toggle')

.popover('dispose')

Menyembunyikan dan menghancurkan popover elemen. Popover yang menggunakan delegasi (yang dibuat menggunakan opsi selector) tidak dapat dimusnahkan satu per satu pada elemen pemicu turunan.

$('#element').popover('dispose')

.popover('enable')

Memberikan popover elemen kemampuan untuk ditampilkan. Popover diaktifkan secara default.

$('#element').popover('enable')

.popover('disable')

Menghapus kemampuan popover elemen untuk ditampilkan. Popover hanya akan dapat ditampilkan jika diaktifkan kembali.

$('#element').popover('disable')

.popover('toggleEnabled')

Mengalihkan kemampuan popover elemen untuk ditampilkan atau disembunyikan.

$('#element').popover('toggleEnabled')

.popover('update')

Memperbarui posisi popover elemen.

$('#element').popover('update')

Acara

$('#myPopover').on('hidden.bs.popover', function () {
  // do something...
})