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.
• Popovers ka deklanche gras a yon eleman andedan yon DOM lonbraj.

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.

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

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

Opsyon

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

Metòd

$().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 tit ak kontni tou de zewo-longè 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 kapasite pou popover yon eleman yo dwe 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

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