Source

Popovers

Dokimantasyon ak egzanp pou ajoute Bootstrap popovers, tankou sa yo jwenn nan iOS, nan nenpòt eleman sou sit ou a.

Apèsi sou lekòl la

Bagay ou dwe konnen lè w ap itilize plugin popover la:

  • Popovers konte sou 3yèm pati bibliyotèk Popper.js pou pwezante. Ou dwe mete popper.min.js anvan bootstrap.js oswa itilize bootstrap.bundle.min.js/ bootstrap.bundle.jski gen Popper.js pou popovers yo travay!
  • Popovers mande pou plugin a tooltip kòm yon depandans.
  • Si w ap konstwi JavaScript nou an soti nan sous, li mande pouutil.js .
  • Popovers yo patisipe pou rezon pèfòmans, kidonk ou dwe inisyalize yo tèt ou .
  • Zewo-longè titleak contentvalè pa janm ap montre yon popover.
  • Espesifye container: 'body'pou evite rann pwoblèm nan eleman ki pi konplèks (tankou gwoup opinyon nou yo, gwoup bouton, elatriye).
  • Deklanche popovers sou eleman kache pa pral travay.
  • Popovers pou .disabledoswa disabledeleman yo dwe deklanche sou yon eleman wrapper.
  • Lè yo deklanche soti nan lank ki vlope sou plizyè liy, popovers yo pral santre ant lajè an jeneral lank yo. Sèvi ak .text-nowrapsou ou <a>pou evite konpòtman sa a.
  • Popovers yo dwe kache anvan eleman korespondan yo te retire nan DOM la.

Kontinye lekti pou wè ki jan popovers travay ak kèk egzanp.

Egzanp: Pèmèt popovers toupatou

Youn nan fason yo inisyalize tout popovers sou yon paj ta dwe chwazi yo pa data-toggleatribi yo:

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

Egzanp: Sèvi ak containeropsyon an

Lè ou gen kèk estil sou yon eleman paran ki entèfere ak yon popover, ou pral vle presize yon koutim containerpou HTML popover a parèt nan eleman sa a pito.

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

Egzanp

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

Kat direksyon

Gen kat opsyon ki disponib: anwo, adwat, anba, ak aliye agoch.

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

Rejte sou pwochen klike sou

Sèvi ak focusdeklanche a pou ranvwaye popovers sou pwochen klik itilizatè a sou yon eleman diferan pase eleman baskil la.

Mak espesifik obligatwa pou ranvwaye-sou-pwochen-klike

Pou bon konpòtman kwa-navigatè ak kwa-platfòm, ou dwe itilize <a>tag la, pa tag la <button>, epi ou dwe gen ladan tou yon tabindexatribi.

Popover ki pa gendwa 
<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'
})

Eleman andikape

Eleman ki gen disabledatribi a pa entèaktif, sa vle di itilizatè yo pa ka hover oswa klike sou yo pou deklanche yon popover (oswa konsèy zouti). Kòm yon solisyon, ou pral vle deklanche popover ki soti nan yon anbalaj <div>oswa <span>ak pase pointer-eventssou plas eleman ki andikape a.

Pou deklannche popover ki andikape, ou ka prefere tou data-trigger="hover"pou popover a parèt kòm fidbak vizyèl imedya pou itilizatè ou yo paske yo pa ka espere klike sou yon eleman ki andikape.

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

Itilizasyon

Pèmèt popovers via JavaScript:

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

Opsyon

Opsyon yo ka pase atravè atribi done oswa JavaScript. Pou atribi done, ajoute non opsyon a nan data-, tankou nan data-animation="".

Non Kalite Default Deskripsyon
animasyon booleyen vre Aplike yon tranzisyon CSS fennen nan popover la
veso fisèl | eleman | fo fo

Mete popover a nan yon eleman espesifik. Egzanp: container: 'body'. Opsyon sa a se patikilyèman itil paske li pèmèt ou pozisyon popover a nan koule nan dokiman an tou pre eleman deklanche a - ki pral anpeche popover a flote lwen eleman deklanche a pandan yon redimensionnement fenèt.
kontni fisèl | eleman | fonksyon ''

Valè kontni par défaut si data-contentatribi pa prezan.

Si yo bay yon fonksyon, yo pral rele li ak thisreferans li mete nan eleman ki popover a tache ak.
reta nimewo | objè 0

Reta montre ak kache popover a (ms) - pa aplike nan kalite deklanche manyèl

Si yo bay yon nimewo, reta aplike pou tou de kache/montre

Estrikti objè se:delay: { "show": 500, "hide": 100 }
html booleyen fo Mete HTML nan popover la. Si se fo, yo textpral itilize metòd jQuery pou mete kontni nan DOM la. Sèvi ak tèks si w enkyete w pou atak XSS.
plasman fisèl | fonksyon 'dwa'

Ki jan yo pozisyon popover a - oto | tèt | anba | kite | dwat.
Lè autoyo espesifye, li pral dinamikman reoryantasyon popover la.

Lè yo itilize yon fonksyon pou detèmine plasman an, yo rele li ak popover DOM kòm premye agiman li epi deklanche eleman DOM kòm dezyèm li. Kontèks thisla mete sou egzanp popover la.
seleksyon fisèl | fo fo Si yo bay yon seleksyon, objè popover yo pral delege nan sib yo espesifye. Nan pratik, sa a yo itilize pou pèmèt kontni HTML dinamik pou ajoute popovers. Gade sa a ak yon egzanp enfòmatif .
modèl fisèl '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Baz HTML pou itilize lè kreye popover a.

Popover a titlepral enjekte nan la .popover-header.

Popover a contentpral enjekte nan la .popover-body.

.arrowpral tounen flèch popover a.

Eleman wrapper ki pi eksteryè a ta dwe gen .popoverklas la.
tit fisèl | eleman | fonksyon ''

Valè tit default si titleatribi pa prezan.

Si yo bay yon fonksyon, yo pral rele li ak thisreferans li mete nan eleman ki popover a tache ak.
deklanche fisèl 'klike' Ki jan popover deklanche - klike sou | hover | konsantre | manyèl. Ou ka pase plizyè deklanche; separe yo ak yon espas. manualpa ka konbine avèk okenn lòt deklanche.
konpanse nimewo | fisèl 0 Konsantrasyon popover a parapò ak sib li yo. Pou plis enfòmasyon, gade nan dokiman konpanse Popper.js la .
falbackPlacement fisèl | etalaj 'flip' Pèmèt yo presize ki pozisyon Popper pral itilize sou repli. Pou plis enfòmasyon, al gade nan dokiman konpòtman Popper.js
fwontyè fisèl | eleman 'scrollParent' Limit kontrent debòde nan popover la. Aksepte valè 'viewport', 'window', 'scrollParent', oswa yon referans HTMLElement (JavaScript sèlman). Pou plis enfòmasyon, gade nan docs preventOverflow Popper.js .

Done atribi pou popovers endividyèl yo

Opsyon pou popovers endividyèl yo ka altènativman espesifye atravè itilizasyon atribi done, jan yo eksplike sa pi wo a.

Metòd

Metòd asynchrone ak tranzisyon

Tout metòd API yo asenkron epi yo kòmanse yon tranzisyon . Yo retounen kote moun k ap rele a le pli vit ke tranzisyon an kòmanse men anvan li fini . Anplis de sa, yo pral inyore yon apèl metòd sou yon eleman tranzisyon .

Gade dokiman JavaScript nou an pou plis enfòmasyon.

$().popover(options)

Inisyalize popovers pou yon koleksyon eleman.

.popover('show')

Revele popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre (sa vle di anvan shown.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la. Popovers ki gen tou de tit ak kontni se zewo longè yo pa janm parèt.

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

.popover('hide')

Kache popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman kache (sa vle di anvan hidden.bs.popoverevènman an rive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

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

.popover('toggle')

Aktivite popover yon eleman. Retounen bay moun kap rele a anvan popover a aktyèlman te montre oswa kache (sa vle di anvan evènman shown.bs.popoveran hidden.bs.popoverrive). Sa a konsidere kòm yon "manyèl" deklanche popover la.

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

.popover('dispose')

Kache epi detwi popover yon eleman. Popovers ki itilize delegasyon (ki kreye lè l sèvi avèk opsyon selectoran ) pa ka detwi endividyèlman sou eleman deklanche desandan yo.

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

.popover('enable')

Bay popover yon eleman kapasite pou yo montre. Popovers yo aktive pa default.

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

.popover('disable')

Retire abilite pou popover yon eleman pou montre. Popover a pral sèlman kapab montre si li re-aktive.

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

.popover('toggleEnabled')

Aktivite kapasite pou popover yon eleman yo dwe montre oswa kache.

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

.popover('update')

Mete ajou pozisyon popover yon eleman.

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

Evènman

Kalite Evènman Deskripsyon
montre.bs.popover Evènman sa a dife imedyatman lè yo showrele metòd egzanp lan.
montre.bs.popover Evènman sa a revoke lè popover a vin vizib pou itilizatè a (ap tann pou tranzisyon CSS fini).
kache.bs.popover Evènman sa a te tire imedyatman lè yo hidete rele metòd egzanp lan.
hidden.bs.popover Evènman sa a revoke lè popover a fini kache pou itilizatè a (ap tann pou tranzisyon CSS fini).
inserted.bs.popover Evènman sa a revoke apre show.bs.popoverevènman an lè yo te ajoute modèl popover nan DOM la. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})