Popovers

Dokumentasi lan conto kanggo nambah popovers Bootstrap, kaya sing ditemokake ing iOS, menyang unsur apa wae ing situs sampeyan.

Ringkesan

Sing kudu dingerteni nalika nggunakake plugin popover:

• Popovers gumantung ing perpustakaan pihak katelu Popper.js kanggo posisi. Sampeyan kudu nyakup popper.min.js sadurunge bootstrap.js utawa nggunakake bootstrap.bundle.min.js/ bootstrap.bundle.jssing ngemot Popper.js supaya popovers bisa digunakake!
• Popovers mbutuhake plugin tooltip minangka ketergantungan.
• Yen sampeyan lagi mbangun JavaScript saka sumber, mbutuhakeutil.js .
• Popovers milih kanggo alasan kinerja, dadi sampeyan kudu miwiti dhewe .
• Zero-dawa titlelan contentnilai ora bakal nuduhake popover.
• Nemtokake container: 'body'kanggo ngindhari masalah rendering ing komponen sing luwih rumit (kayata grup input, grup tombol, lsp).
• Micu popovers ing unsur sing didhelikake ora bakal bisa.
• Popovers kanggo .disabledutawa disabledunsur kudu micu ing unsur wrapper.
• Nalika dipicu saka jangkar sing mbungkus pirang-pirang baris, popover bakal dipusatake ing antarane jembar sakabèhé jangkar. Gunakake .text-nowraping <a>s kanggo supaya prilaku iki.
• Popovers kudu didhelikake sadurunge unsur sing cocog wis dibusak saka DOM.
• Popovers bisa micu thanks kanggo unsur nang bayangan DOM.

Tansah maca kanggo ndeleng carane popovers bisa digunakake karo sawetara conto.

Conto: Aktifake popovers ing endi wae

Salah siji cara kanggo miwiti kabeh popovers ing kaca yaiku milih kanthi data-toggleatribut:

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

Conto: Nggunakake containeropsi

Yen sampeyan duwe sawetara gaya ing unsur induk sing ngganggu popover, sampeyan pengin nemtokake adat containersupaya HTML popover katon ing unsur kasebut.

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

Tuladha

<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>

Papat arah

Papat opsi kasedhiya: ndhuwur, tengen, ngisor, lan kiwa didadekake siji.

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on top
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on right
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on bottom
</button>

<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
  Popover on left
</button>

Mbusak ing klik sabanjuré

Gunakake focuspemicu kanggo ngilangi popovers ing klik sabanjuré pangguna saka unsur beda saka unsur toggle.

<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'
})

Unsur dipatèni

Elemen karo disabledatribut ora interaktif, tegese pangguna ora bisa ngeklik utawa ngeklik kanggo micu popover (utawa tooltip). Minangka workaround, sampeyan bakal pengin micu popover saka pambungkus <div>utawa <span>lan ngganti ing pointer-eventsunsur dipatèni.

Kanggo pemicu popover sing dipatèni, sampeyan uga luwih seneng data-trigger="hover"supaya popover katon minangka umpan balik visual langsung kanggo pangguna amarga ora ngarep-arep ngeklik unsur sing dipatèni.

<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>

Panggunaan

Aktifake popovers liwat JavaScript:

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

Pilihan

Opsi bisa dilewati liwat atribut data utawa JavaScript. Kanggo atribut data, tambahake jeneng pilihan menyang data-, kaya ing data-animation="".

Metode

$().popover(options)

Inisialisasi popovers kanggo koleksi unsur.

.popover('show')

Nuduhake popover unsur. Bali menyang panelpon sadurunge popover bener-bener ditampilake (yaiku sadurunge shown.bs.popoveracara kasebut kedadeyan). Iki dianggep minangka "manual" pemicu popover. Popover sing judhul lan isine nol-dawa ora bakal ditampilake.

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

.popover('hide')

Ndhelikake popover unsur. Bali menyang panelpon sadurunge popover bener-bener didhelikake (yaiku sadurunge hidden.bs.popoverkedadeyan kasebut). Iki dianggep minangka "manual" pemicu popover.

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

.popover('toggle')

Ngalih popover unsur. Bali menyang panelpon sadurunge popover wis bener ditampilake utawa didhelikake (yaiku sadurunge acara shown.bs.popoverutawa hidden.bs.popoverkedadeyan). Iki dianggep minangka "manual" pemicu popover.

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

.popover('dispose')

Ndhelikake lan ngrusak popover unsur. Popovers sing nggunakake delegasi (sing digawe nggunakake pilihanselector ) ora bisa dirusak individu ing unsur pemicu turunan.

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

.popover('enable')

Menehi popover unsur kemampuan kanggo ditampilake. Popovers diaktifake kanthi gawan.

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

.popover('disable')

Mbusak kemampuan kanggo popover unsur kanggo ditampilake. Popover mung bakal bisa ditampilake yen diaktifake maneh.

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

.popover('toggleEnabled')

Ngalih kemampuan kanggo popover unsur supaya ditampilake utawa didhelikake.

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

.popover('update')

Nganyari posisi popover unsur.

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

Acara

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