Source

Bapopovers

Mikanda mpe bandakisa mpo na kobakisa ba popovers ya Bootstrap, lokola oyo ezwami na iOS, na élément nyonso na site na yo.

Botali ya mozindo

Makambo oyo osengeli koyeba ntango ozali kosalela plugin ya popover:

  • Popovers ba se fier na bibliothèque ya 3ème partie Popper.js pona positionnement. Esengeli otia popper.min.js liboso ya bootstrap.js to osalela bootstrap.bundle.min.js/ bootstrap.bundle.jsoyo ezali na Popper.js mpo ba popovers esalaka!
  • Popovers esengaka plugin ya tooltip lokola dépendance.
  • Soki ozali kotonga JavaScript na biso uta na source, esengiutil.js .
  • Popovers ezali opt-in mpo na ba raisons ya performance, yango wana esengeli o initialiser yango yo moko .
  • Zéro-longueur titlena ba contentvaleurs eko lakisa jamais popover.
  • Boyebisa container: 'body'pona ko éviter ba problèmes ya rendu na ba composants plus complexes (lokola ba groupes na biso ya entrée, ba groupes ya boutons, etc).
  • Ko déclencher ba popovers na ba éléments cachés ekosimba te.
  • Popovers mpo na .disabledto disabledba éléments esengeli e déclenché na élément ya enveloppe.
  • Ntango ebandisami uta na ba ancres oyo ezingami na milɔngɔ mingi, ba popovers ekozala na katikati kati na bonene mobimba ya ba ancres. Salelá .text-nowrapna s na yo <a>mpo na koboya ezaleli oyo.
  • Esengeli kobomba ba popovers avant ba éléments correspondants na yango elongolama na DOM.
  • Popovers ekoki ko déclenché grâce na élément moko na kati ya DOM ya ombre.

Effet ya animation ya composante oyo ezali dépendant na prefers-reduced-motionrequête ya média. Tala eteni ya mouvement réduit ya mikanda na biso ya accessibilité .

Koba kotanga mpo na komona ndenge nini ba popovers esalaka na mwa bandakisa.

Ndakisa: Kofungola ba popovers bisika nyonso

Lolenge moko ya ko initialiser ba popovers nionso na page moko ekozala pona yango na data-toggleattribut na yango:

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

Ndakisa: Kosalela containeroption

Ntango ozali na mwa ba styles na élément parent oyo e interférer na popover, okolinga ko préciser personnalisé containermpo HTML ya popover ebima na kati ya élément wana na esika na yango.

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

Ndakisa

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

Ba direction minei

Ba options minei ezali: likolo, na loboko ya mobali, na nse, mpe na loboko ya mwasi.

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

Bolongola na clic oyo elandi

Salelá focusdéclencheur mpo na koboya ba popovers na clic oyo elandi ya mosaleli ya élément ekeseni na élément ya kobalusa.

Marquage spécifique esengeli mpo na dismiss-on-next-click

Mpo na bizaleli malamu ya croix-navigateur mpe cross-plateforme, osengeli kosalela <a>tag, kasi tag te <button>, mpe osengeli mpe kotya tabindexattribut.

Popover oyo ekoki kolongolama 
<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'
})

Ba éléments oyo ekangami

Ba éléments oyo ezali na disabledattribut ezali interactif te, elingi koloba ba usagers bakoki te ko hover to ko cliquer yango pona ko déclencher popover (to tooltip). Lokola solution, okolinga ko déclencher popover à partir ya enveloppe <div>to <span>pe ko override the pointer-eventsna élément désactivé.

Mpo na ba déclencheur ya popover oyo ekangami, okoki mpe kolinga data-trigger="hover"mpo ete popover ebima lokola makanisi ya komona ya mbala moko na basaleli na yo lokola bakoki kozela te kofina na eleman oyo ekangami.

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

Kosalela yango

Bofungola ba popovers na nzela ya JavaScript:

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

Makambo oyo okoki kopona

Ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript. Mpo na ba attributs ya ba données, bakisa kombo ya option na data-, lokola na data-animation="".

Nkombo Lolenge Mbeba Ndimbola
animation ya kosala boolean ya solo Salelá transition ya fade ya CSS na popover
eloko oyo batyaka na kati molongo ya molongo | élément | lokuta lokuta

Ebakisi popover na élément moko ya sikisiki. Ndakisa: container: 'body'. Option oyo ezali surtout utile na ndenge epesaka yo nzela ya ko positionner popover na flux ya document pene ya élément déclencheur - oyo ekopekisa popover e flotter mosika na élément déclencheur na tango ya changement ya taille ya fenêtre.
makambo eza na kati molongo ya molongo | élément | mosala '' .

Valeur ya contenus par défaut soki data-contentattribut ezali te.

Soki fonction moko epesami, ekobenga yango na thisensemble ya référence na yango na élément oyo popover ekangami na yango.
kozelisa motango | moto ya likambo 0.

Retard ya kolakisa pe kobomba popover (ms) - etali te type ya déclencheur manuel

Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa

Bokeli ya eloko ezali:delay: { "show": 500, "hide": 100 }
html boolean lokuta Kotisa HTML na kati ya popover. Soki ezali lokuta, méthode ya jQuery textekosalelama mpo na kokotisa makambo na DOM. Salelá makomi soki ozali komitungisa mpo na ba attaques ya XSS.
esika ya kotya yango molongo ya molongo | mosala 'malamu'

Ndenge nini ko positionner popover - auto | likolo ya likolo | na nse | na gauche | malamu.
Tango autoe précisé, eko réorienter dynamiquement popover.

Tango fonction esalelami pona koyeba placement, ebengami na node popover DOM lokola argument na yango ya liboso pe élément déclencheur node DOM lokola ya mibale na yango. Contexte thisetiamaki na instance ya popover.
moponi molongo ya molongo | lokuta lokuta Soki moponi epesami, biloko ya popover ekopesama na ba cibles oyo elakisami. Na pratique, yango esalelamaka pona ko permettre ba contenus HTML dynamiques ezala na ba popovers oyo ebakisami. Talá oyo mpe ndakisa moko oyo ezali kopesa makambo mingi .
modèle ya kosala shene '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

Base HTML ya kosalela tango ya kosala popover.

Ba popover's titlebako injecter na kati ya .popover-header.

Ba popover's contentbako injecter na kati ya .popover-body.

.arrowekokoma flèche ya popover.

Elemento ya enveloppe ya libanda esengeli kozala na .popoverclasse.
titre molongo ya molongo | élément | mosala '' .

Valeur ya titre par défaut soki titleattribut ezali te.

Soki fonction moko epesami, ekobenga yango na thisensemble ya référence na yango na élément oyo popover ekangami na yango.
kobandisa shene 'cliquez'. Ndenge nini popover ebandi - finá | kosala hover | focus | mokanda. Okoki koleka ba déclencheur ebele; kokabola bango na esika moko. manualekoki kosangisama te na déclencheur mosusu.
offset ya kosala motango | shene 0. Offset ya popover par rapport na cible na yango. Mpo na koyeba makambo mingi tala Docs ya offset ya Popper.js .
fallbackKotia na esika na yango molongo ya molongo | array ya biloko 'kobalusa' Tika kolakisa position nini Popper akosalela na fallback. Mpo na koyeba makambo mingi tala mikanda ya bizaleli ya Popper.js
ndelo ya mboka molongo ya molongo | eloko 'moboti ya défilement'. Débordement contrainte frontière ya popover. Endimi motuya ya 'viewport', 'window', 'scrollParent', to référence ya HTMLElement (JavaScript kaka). Mpo na koyeba makambo mingi tala ba docs ya preventOverflow ya Popper.js .

Ba attributs ya ba données pona ba popovers moko moko

Ba options pona ba popovers moko moko ekoki na ndenge mosusu kozala précisé na nzela ya bosaleli ba attributs ya ba données, ndenge elimbolami likolo.

Ba méthodes ya kosala

Ba méthodes asynchrones na ba transitions

Ba méthodes nionso ya API ezali asynchrone mpe ebandi transition . Bazongaka epai ya moto oyo abengi ntango kaka mbongwana ebandi kasi liboso ete esila . En plus, appel ya méthode na composante ya transition ekozala ignorée .

Tala mikanda na biso ya JavaScript mpo na koyeba makambo mosusu .

$().popover(options)

Initialise ba popovers pona collection ya élément.

.popover('show')

Ezali kobimisa popover ya élément moko. Ezongi na mobengi yambo popover elakisama mpenza (elingi koloba liboso ete shown.bs.popoverlikambo esalema). Yango etalelami lokola “manuel” oyo ebandisaka popover. Ba Popovers oyo titre na yango na contenus na yango ezali na bolai ya zéro elakisami jamais.

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

.popover('hide')

Ebombaka popover ya élément moko. Ezongi na mobengi yambo ete popover ebombama mpenza (elingi koloba liboso ete hidden.bs.popoverlikambo esalema). Yango etalelami lokola “manuel” oyo ebandisaka popover.

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

.popover('toggle')

Toggles popover ya élément moko. Ezongi na mobengi yambo popover elakisama to ebombama mpenza (elingi koloba liboso ete likambo shown.bs.popoverto hidden.bs.popoveresalema). Yango etalelami lokola “manuel” oyo ebandisaka popover.

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

.popover('dispose')

Ebombaka mpe ebebisaka popover ya élément moko. Ba popovers oyo esalela délégation (oyo esalemi na nzela ya selectoroption ) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.

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

.popover('enable')

Epesaka popover ya élément moko makoki ya kolakisa. Popovers ezali activé par défaut.

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

.popover('disable')

Elongolaka makoki mpo na popover ya élément moko elakisama. Popover ekozala na makoki ya kolakisa kaka soki ezongisami na mosala.

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

.popover('toggleEnabled')

Toggles makoki mpo na popover ya element moko elakisama to ebombama.

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

.popover('update')

Mikolo oyo position ya popover ya élément moko.

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

Makambo oyo esalemaki

Lolenge ya likambo Ndimbola
elakisaka.bs.popover Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
elakisami.bs.bobola Evenement oyo ezo beta tango popover esalemi visible na mosaleli (ekozela ba transitions ya CSS esila).
bomba.bs.bobola Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
ebombami.bs.bobola Evenement oyo ezo beta tango popover esili kobombama na mosaleli (ekozela ba transitions ya CSS esila).
ekotisami.bs.bobola Evenement oyo ezo bengana sima ya show.bs.popoverévénement tango modèle ya popover ebakisami na DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})