Source

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.

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.

Markup khusus dibutuhake kanggo ngilangi-on-next-click

Kanggo prilaku lintas-browser lan lintas-platform sing tepat, sampeyan kudu nggunakake <a>tag, dudu tag <button>, lan sampeyan uga kudu nyakup tabindexatribut.

Popover sing bisa dibuwang 
<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="".

jeneng Jinis Default Katrangan
animasi boolean bener Aplikasi transisi fade CSS menyang popover
wadhah senar | unsur | palsu palsu

Nambahake popover menyang unsur tartamtu. Tuladha: container: 'body'. Opsi iki migunani banget amarga ngidini sampeyan nyetel popover ing aliran dokumen ing cedhak unsur pemicu - sing bakal nyegah popover saka ngambang saka unsur pemicu nalika ngowahi ukuran jendhela.
isi senar | unsur | fungsi ''

Nilai isi standar yen data-contentatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.
tundha nomer | obyek 0

Tundha nuduhake lan ndhelikake popover (ms) - ora ditrapake kanggo jinis pemicu manual

Yen nomer diwenehake, wektu tundha ditrapake kanggo ndhelikake / nuduhake

Struktur obyek yaiku:delay: { "show": 500, "hide": 100 }
html boolean palsu Lebokake HTML menyang popover. Yen palsu, textcara jQuery bakal digunakake kanggo nglebokake isi menyang DOM. Gunakake teks yen sampeyan kuwatir babagan serangan XSS.
panggonan panggonan senar | fungsi 'bener'

Carane posisi popover - otomatis | ndhuwur | ngisor | kiwa | bener.
Nalika autowis ditemtokake, iku bakal mbosenke reorient popover.

Nalika fungsi digunakake kanggo nemtokake panggonan seko, diarani simpul DOM popover minangka argumen pisanan lan unsur pemicu DOM node minangka kaloro. Konteks thisdisetel menyang conto popover.
pamilih senar | palsu palsu Yen pamilih diwenehake, obyek popover bakal didelegasikan menyang target sing ditemtokake. Ing laku, iki digunakake kanggo ngaktifake isi HTML dinamis kanggo nambah popovers. Waca iki lan conto informatif .
cithakan senar '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML dhasar kanggo digunakake nalika nggawe popover.

Popover titlebakal disuntikake menyang .popover-header.

Popover contentbakal disuntikake menyang .popover-body.

.arrowbakal dadi panah popover.

Unsur pambungkus paling njaba kudu duwe .popoverkelas.
judhul senar | unsur | fungsi ''

Nilai judhul standar yen titleatribut ora ana.

Yen fungsi diwenehi, iku bakal disebut karo thisreferensi disetel kanggo unsur sing popover ditempelake.
pemicu senar 'klik' Carane popover dipicu - klik | nglayang | fokus | manual. Sampeyan bisa ngliwati sawetara pemicu; misahake karo spasi. manualora bisa digabungake karo pemicu liyane.
ngimbangi nomer | senar 0 Offset saka popover relatif kanggo target sawijining. Kanggo informasi luwih lengkap waca docs offset Popper.js .
fallbackPlacement senar | susunan 'muter' Ngidini kanggo nemtokake posisi sing bakal digunakake Popper nalika mundur. Kanggo informasi luwih lengkap waca docs prilaku Popper.js
wates senar | unsur 'scrollParent' Wates kendala overflow saka popover. Nampa nilai 'viewport', 'window', 'scrollParent', utawa referensi HTMLElement (JavaScript mung). Kanggo informasi luwih lengkap waca Popper.js kang preventOverflow docs .

Atribut data kanggo popovers individu

Pilihan kanggo popovers individu bisa uga ditemtokake liwat nggunakake atribut data, kaya sing diterangake ing ndhuwur.

Metode

Cara lan transisi asinkron

Kabeh cara API ora sinkron lan miwiti transisi . Dheweke bali menyang panelpon sanalika transisi diwiwiti nanging sadurunge rampung . Kajaba iku, panggilan metode ing komponen transisi bakal diabaikan .

Deleng dokumentasi JavaScript kanggo informasi luwih lengkap.

$().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

Jinis Acara Katrangan
show.bs.popover Acara iki langsung murub nalika showmetode conto diarani.
ditampilake.bs.popover Acara iki dipecat nalika popover wis katon kanggo pangguna (bakal ngenteni transisi CSS rampung).
hide.bs.popover Acara iki langsung dipecat nalika hidemetode conto wis diarani.
hidden.bs.popover Acara iki dipecat nalika popover wis rampung didhelikake saka pangguna (bakal ngenteni transisi CSS rampung).
inserted.bs.popover Acara iki dipecat sawise show.bs.popoveracara nalika cithakan popover wis ditambahake menyang DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})