Salá koleka na makambo ya ntina Salta na navigation ya docs
Check
in English

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 troisième partie Popper pona positionnement. Esengeli otia popper.min.js liboso bootstrap.jsya , to osalela moko bootstrap.bundle.min.jsoyo ezali na Popper.
  • Popovers esengaka plugin ya popover lokola dépendance.
  • 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.
Par défaut, composant oyo esalela sanitizer ya contenus intégré, oyo elongolaka ba éléments HTML nionso oyo epesami nzela ya polele te. Tala eteni ya sanitizer na mikanda na biso ya JavaScript mpo na koyeba makambo mosusu.
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.

Bandakisa

Activer ba popovers

Ndenge tolobaki yango likolo, esengeli o initialiser ba popovers avant ekoki kosalelama. Lolenge moko ya ko initialiser ba popovers nionso na page moko ekozala pona yango na data-bs-toggleattribut na yango, lokola boye:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Démonstration en direct

Tosalelaka JavaScript ndenge moko na fragment oyo ezali likolo mpo na kosala popover en direct oyo elandi. Ba titres ezo fixer via data-bs-titlepe contenus ya nzoto ezo fixer via data-bs-content.

Bozala na bonsomi ya kosalela moko titleto data-bs-titlena HTML na bino. Tango titleesalelami, Popper eko remplacer yango automatiquement na data-bs-titletango élément ezo rendu.
html
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Ba direction minei

Makambo minei oyo okoki kopona ezali: likoló, na lobɔkɔ ya mobali, na nse mpe na lobɔkɔ ya mwasi. Ba direction ezali mirroré tango ozali kosalela Bootstrap na RTL. Set data-bs-placementmpo na kobongola nzela.

html
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

Momesenocontainer

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. Yango esalemaka mingi na ba tableaux oyo ezo répondre, ba groupes ya entrée, na ba oyo ya ndenge wana.

const popover = new bootstrap.Popover('.example-popover', {
  container: 'body'
})

Situation mosusu esika okolinga kotiya coutume explicite containerezali ba popovers na kati ya dialogue modal , mpo na kosala que popover yango moko ezala appendé na modal. Yango ezali na ntina mingi mpo na ba popovers oyo ezali na ba éléments interactifs – ba dialogues modaux ekokanga focus, yango wana sauf soki popover ezali élément enfant ya modal, ba usagers bakozala na makoki te ya ko focuser to ko activer ba éléments interactifs oyo.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Ba popovers ya coutume

Ebakisami na v5.2.0

Okoki ko personnaliser apparence ya ba popovers na nzela ya ba variables CSS . Totie classe personnalisée na data-bs-custom-class="custom-popover"pona ko scoper apparence personnalisée na biso pe tosalelaka yango pona ko overrider mua ba variables ya CSS local.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}
html
<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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.

html
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>
const popover = new bootstrap.Popover('.popover-dismiss', {
  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 uta na enveloppe <div>to <span>, malamu esalemi clavier-focusable kosalela tabindex="0".

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

html
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

CSS

Ba variables oyo ezali

Ebakisami na v5.2.0

Lokola eteni ya approche ya ba variables CSS oyo ezali ko évoluer ya Bootstrap, ba popovers basalelaka sikoyo ba variables CSS locales na .popoverpona personnalisation ya temps réel oyo ematisami. Ba valeurs pona ba variables ya CSS etiamaki na nzela ya Sass, yango wana personnalisation ya Sass ezali kaka kosungama, pe.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Ba variables ya Sass

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;

Kosalela yango

Bofungola ba popovers na nzela ya JavaScript:

const exampleEl = document.getElementById('example')
const popover = new bootstrap.Popover(exampleEl, options)

Kosala ba popovers esalaka pona ba usagers ya clavier na technologie ya assistance

Pona ko permettre ba usagers ya clavier ba activer ba popovers na yo, esengeli obakisa yango kaka na ba éléments HTML oyo traditionnellement ezalaka focusable na clavier pe interactif (lokola ba liens to ba contrôles ya formulaire). Atako ba éléments HTML arbitraires (lokola <span>s) ekoki kosalama focusable na kobakisa tabindex="0"attribut, yango ekobakisa ba arrêts ya onglet potentiellement dérangeant mpe confusion na ba éléments non interactifs mpo na ba usagers ya clavier, mpe ba technologies mingi ya assistance na tango oyo esakolaka te contenus ya popover na situation oyo . En plus, ko se fier kaka te hovercomme déclencheur ya ba popovers na yo, po yango ekosala que ezala impossible ya ko déclencher pona ba usagers ya clavier.

Atako okoki kokɔtisa HTML ya bozwi, oyo ebongisami malamu na kati ya bapopovers na nzela ya htmlkopona, tozali kolendisa yo makasi ete oboya kobakisa motángo ya makambo oyo eleki ndelo. Lolenge ba popovers esalaka lelo oyo ezali ete, mbala moko elakisami, makambo na yango ekangami na élément déclencheur na aria-describedbyattribut. Yango wana, mobimba ya makambo ya popover ekoyebisama na basaleli ya tekiniki ya kosunga lokola ebale moko molai, oyo ekatanaki te.

En plus, atako ezali possible mpe ko inclure ba contrôles interactifs (lokola ba éléments ya formulaire to ba liens) na popover na yo (na kobakisa ba éléments oyo na ya allowListya ba attributs mpe ba balises oyo epesami nzela), zala conscient que na tango oyo popover e gérer ordre ya focus ya clavier te. Ntango mosaleli ya clavier afungolaka popover, focus etikalaka na élément déclencheur, mpe lokola popover mbala mingi elandaka mbala moko déclencheur te na structure ya mokanda, garantie ezali te que kokende liboso/kofinaTABekokende na mosaleli ya klaviatware na kati ya popover yango moko. Na mokuse, kaka kobakisa ba contrôles interactifs na popover ezali probablement kosala que ba contrôles wana ezala incontactables/inutilisables mpo na ba usagers ya clavier mpe ba usagers ya ba technologies d’assistance, to au moins kosala ordre ya focus global illogique. Na makambo oyo, kanisá kosalela na esika na yango dialogue modal.

Makambo oyo okoki kopona

Lokola ba options ekoki koleka na nzela ya ba attributs ya ba données to JavaScript, okoki kobakisa kombo ya option na data-bs-, lokola na data-bs-animation="{value}". Sala makasi o changer type ya cas ya kombo ya option depuis “ camelCase ” na “ kebab-case ” tango ozali koleka ba options via ba attributs ya ba données. Na ndakisa, salelá data-bs-custom-class="beautifier"na esika ya data-bs-customClass="beautifier".

Kobanda na Bootstrap 5.2.0, ba composants nionso esungaka attribut ya ba données réservées expérimentalesdata-bs-config oyo ekoki ko louer configuration ya composant simple lokola chaîne JSON. Tango élément moko ezali data-bs-config='{"delay":0, "title":123}'na na ba data-bs-title="456"attributs, valeur ya suka titleekozala 456mpe ba attributs ya ba données separates eko overrider ba valeurs oyo epesami na data-bs-config. En plus, ba attributs ya ba données oyo ezali ezali capable ya ko louer ba valeurs JSON lokola data-bs-delay='{"show":0,"hide":150}'.

Yeba ete mpo na bantina ya bokengi sanitize, sanitizeFn, mpe allowListba options ekoki kopesama te na kosalelaka ba attributs ya ba données.
Nkombo Lolenge Mbeba Ndimbola
allowList moto ya likambo Valeur ya défaut Objet oyo ezali na ba attributs na ba balises oyo epesami nzela.
animation boolean true Salelá transition ya fade ya CSS na popover.
boundary molongo, eloko 'clippingParents' Frontière ya contrainte ya débordement ya popover (etali kaka modificateur ya preventOverflow ya Popper). Na ndenge ya libela, ezali 'clippingParents'mpe ekoki kondima référence HTMLElement (na nzela ya JavaScript kaka). Mpo na koyeba makambo mingi tala Docs ya detectOverflow ya Popper .
container molongo, eleman, lokuta false 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.
content molongo, eleman, mosala '' Valeur ya contenus par défaut soki data-bs-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.
customClass molongo, mosala '' Bakisa ba classes na popover tango elakisami. Yeba ete ba classes oyo ekobakisama en plus ya ba classes nionso oyo elakisami na modèle. Mpo na kobakisa bakelasi mingi, kabola yango na bisika: 'class-1 class-2'. Okoki mpe koleka fonction oyo esengeli kozongisa molongo moko oyo ezali na ba kombo ya kelasi ya kobakisa.
delay motango, eloko 0 Retard ya kolakisa mpe kobomba popover (ms) —etali te lolenge ya déclencheur manuel. Soki nimero moko epesami, retard esalemi na nyonso mibale kobomba/lakisa. Ebongiseli ya biloko ezali: delay: { "show": 500, "hide": 100 }.
fallbackPlacements molongo, molongo ['top', 'right', 'bottom', 'left'] Limbola ba placements ya fallback na kopesaka liste ya ba placements na array (na ordre ya préférence). Mpo na koyeba makambo mingi tala mikanda ya bizaleli ya Popper .
html boolean false Tika HTML na kati ya popover. Soki ezali solo, ba balises HTML na popover's titleekozala rendu na popover. Soki lokuta, innerTextpropriété ekosalelama mpo na kokotisa makambo na DOM. Salelá makomi soki ozali komitungisa mpo na ba attaques ya XSS.
offset motango, molongo, mosala [0, 0] Offset ya popover par rapport na cible na yango. Okoki koleka molongo na ba attributs ya ba données na ba valeurs oyo ekabwani na virgule lokola: data-bs-offset="10,20". Tango fonction esalelami pona koyeba offset, ebengamaka na objet oyo ezali na placement ya popper, référence, na ba rects ya popper lokola argument na yango ya liboso. Node DOM ya élément déclencheur eleki lokola argument ya mibale. Fonction esengeli kozongisa array oyo ezali na ba nombres mibale: skidding , distance . Mpo na koyeba makambo mingi tala Docs ya offset ya Popper .
placement molongo, mosala 'top' Ndenge nini ko positionner popover: auto, likolo, na se, gauche, droite. 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.
popperConfig null, eloko, mosala null Mpo na kobongola configuration ya Popper ya liboso ya Bootstrap, tala configuration ya Popper . Tango fonction moko esalelami pona kosala configuration ya Popper, ebengami na objet oyo ezali na configuration ya Popper par défaut ya Bootstrap. Esalisaka yo osalela mpe osangisa oyo ya liboso na configuration na yo moko. Fonction esengeli kozongisa objet ya configuration pona Popper.
sanitize boolean true Activer to désactiver sanitisation. Soki activé 'template', 'content'na ba 'title'options ekozala sanitisé.
sanitizeFn null, mosala null Awa okoki ko fournir fonction ya sanitize na yo moko. Yango ekoki kozala na ntina soki olingi kosalela bibliotɛkɛ oyo ebongisami mpo na kosala bopɛto.
selector nsinga, lokuta false Soki moponi epesami, biloko ya popover ekopesama na ba cibles oyo elakisami. Na pratique, yango esalelamaka pona pe kosalela ba popovers na ba éléments DOM oyo ebakisami dynamiquement ( jQuery.onsoutien). Talá nimero oyo mpe ndakisa oyo ezali kopesa makambo mingi .
template shene '<div class="popover" role="popover"><div class="popover-arrow"></div><div class="popover-inner"></div></div>' Base HTML ya kosalela tango ya kosala popover. Ba popover's titlebako injecter na kati ya .popover-inner. .popover-arrowekokoma flèche ya popover. Elemento ya enveloppe ya libanda esengeli kozala na .popoverclasse mpe role="popover".
title molongo, eleman, 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.
trigger shene 'hover focus' Ndenge nini popover e déclenché: cliquez, hover, focus, manuel. Okoki koleka ba déclencheur ebele; kokabola bango na esika moko. 'manual'elakisi ete popover ekozala déclenché programmatiquement via ba .popover('show'), .popover('hide')na ba .popover('toggle')méthodes; motuya oyo ekoki kosangisama te na déclencheur mosusu. 'hover'na yango moko ekosala ba popovers oyo ekoki ko déclenché te na nzela ya clavier, mpe esengeli kosalelama kaka soki ba méthodes alternatives ya ko transmettre ba informations moko pona ba usagers ya clavier ezali.

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.

Kosalela fonction napopperConfig

const popover = new bootstrap.Popover(element, {
  popperConfig(defaultBsPopperConfig) {
    // const newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

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 .

Metode Ndimbola
disable Elongolaka makoki mpo na popover ya élément moko elakisama. Popover ekozala na makoki ya kolakisa kaka soki ezongisami na mosala.
dispose Ebombaka mpe ebebisaka popover ya élément moko (Elongolaka ba données oyo ebombami na élément DOM). Popovers oyo esalela délégation (oyo esalemi na nzela ya selectoroption ) ekoki kobebisama moko moko te na ba éléments déclencheur descendant.
enable Epesaka popover ya élément moko makoki ya kolakisa. Popovers ezali activé par défaut.
getInstance Méthode statique oyo e permettre yo ozua instance ya popover associé na élément DOM.
getOrCreateInstance Méthode statique oyo e permettre yo ozua instance ya popover oyo ezo sangana na élément DOM, to o créer ya sika au cas où ezalaki initialisé te.
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.
setContent Epesi moyen ya ko changer contenus ya popover après initialisation na yango.
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 nionso mibale ezali zéro-longueur elakisami jamais.
toggle Toggles popover ya élément moko. Ezongi na mobengi yambo popover elakisama to ebombama mpenza (elingi koloba yambo ete likambo shown.bs.popoverto hidden.bs.popoveresalema). Yango etalelami lokola “manuel” oyo ebandisaka popover.
toggleEnabled Toggles makoki mpo na popover ya element moko elakisama to ebombama.
update Mikolo oyo position ya popover ya élément moko.
// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

// setContent example
myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})
Méthode setContentendimi objectargument, esika property-key moko na moko ezali stringselecteur ya malamu na kati ya modèle ya popover, mpe property-value moko na moko oyo etali yango ekoki kozala string| element| function| null

Makambo oyo esalemaki

Likambo Ndimbola
hide.bs.popover Evenement oyo ezo beta mbala moko tango hideméthode ya instance ebengami.
hidden.bs.popover Evenement oyo ezo beta tango popover esili kobombama na mosaleli (ekozela ba transitions ya CSS esila).
inserted.bs.popover Evenement oyo ezo bengana sima ya show.bs.popoverévénement tango modèle ya popover ebakisami na DOM.
show.bs.popover Evenement oyo ezo beta mbala moko tango showméthode ya instance ebengami.
shown.bs.popover Evenement oyo ezo beta tango popover esalemi visible na mosaleli (ekozela ba transitions ya CSS esila).
const myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', () => {
  // do something...
})