Popovers

Documentație și exemple pentru adăugarea popover-urilor Bootstrap, precum cele găsite în iOS, la orice element de pe site-ul dvs.

Prezentare generală

Lucruri de știut când utilizați pluginul popover:

• Popovers se bazează pe biblioteca terță parte Popper pentru poziționare. Trebuie să includeți popper.min.js înainte de bootstrap.js sau să utilizați bootstrap.bundle.min.js/ bootstrap.bundle.jscare conține Popper pentru ca popover-urile să funcționeze!
• Popover-urile necesită pluginul tooltip ca dependență.
• Dacă construiți JavaScript din sursă, este nevoieutil.js de .
• Popover-urile sunt opt-in din motive de performanță, așa că trebuie să le inițializați singur .
• Lungimea zero titleși contentvalorile nu vor afișa niciodată un popover.
• Specificați container: 'body'pentru a evita problemele de randare în componente mai complexe (cum ar fi grupurile noastre de intrare, grupurile de butoane etc.).
• Declanșarea popover-urilor pe elemente ascunse nu va funcționa.
• Popover-urile pentru .disabledsau disabledelemente trebuie să fie declanșate pe un element wrapper.
• Când sunt declanșate de la ancore care se înfășoară pe mai multe linii, popover-urile vor fi centrate între lățimea totală a ancorelor. Folosește -l .text-nowrappe tine <a>pentru a evita acest comportament.
• Popover-urile trebuie ascunse înainte ca elementele lor corespunzătoare să fie eliminate din DOM.
• Popover-urile pot fi declanșate datorită unui element din interiorul unui DOM umbră.

Continuați să citiți pentru a vedea cum funcționează popover-urile cu câteva exemple.

Exemplu: activați popover-urile peste tot

O modalitate de a inițializa toate popover-urile dintr-o pagină ar fi să le selectați după data-toggleatributul lor:

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

Exemplu: Utilizarea containeropțiunii

Când aveți unele stiluri pe un element părinte care interferează cu un popover, veți dori să specificați o personalizare container, astfel încât HTML-ul popover-ului să apară în acel element.

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

Exemplu

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

Patru direcții

Sunt disponibile patru opțiuni: aliniat sus, dreapta, jos și stânga.

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

Închideți la următorul clic

Utilizați focusdeclanșatorul pentru a închide popover-urile la următorul clic al utilizatorului asupra unui alt element decât elementul de comutare.

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

Elemente dezactivate

Elementele cu disabledatributul nu sunt interactive, ceea ce înseamnă că utilizatorii nu pot trece cu mouse-ul sau nu pot face clic pe ele pentru a declanșa un popover (sau un sfat instrument). Ca o soluție, veți dori să declanșați popover-ul dintr-un înveliș <div>sau <span>să înlocuiți pointer-eventselementul dezactivat.

Pentru declanșatoarele popover dezactivate, este posibil să preferați, data-trigger="hover"de asemenea, ca popoverul să apară ca feedback vizual imediat pentru utilizatorii dvs., deoarece aceștia nu se așteaptă să facă clic pe un element dezactivat.

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

Utilizare

Activați popover-urile prin JavaScript:

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

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

Opțiuni

Opțiunile pot fi transmise prin atribute de date sau JavaScript. Pentru atributele datelor, adăugați numele opțiunii la data-, ca în data-animation="".

Metode

$().popover(options)

Inițializează popover-urile pentru o colecție de elemente.

.popover('show')

Dezvăluie popover-ul unui element. Revine la apelant înainte ca popover-ul să fie afișat efectiv (adică înainte de apariția shown.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului. Popover-urile al căror titlu și conținut sunt ambele de lungime zero nu sunt niciodată afișate.

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

.popover('hide')

Ascunde popover-ul unui element. Se întoarce la apelant înainte ca popover-ul să fi fost efectiv ascuns (adică înainte de apariția hidden.bs.popoverevenimentului). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('toggle')

Comută popover-ul unui element. Revine la apelant înainte ca popover-ul să fi fost efectiv afișat sau ascuns (adică înainte ca evenimentul shown.bs.popoversau să hidden.bs.popoverapară). Aceasta este considerată o declanșare „manuală” a popover-ului.

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

.popover('dispose')

Ascunde și distruge popover-ul unui element. Popover-urile care folosesc delegarea (care sunt create folosind opțiunea selector) nu pot fi distruse individual pe elementele de declanșare descendente.

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

.popover('enable')

Oferă popover-ului unui element posibilitatea de a fi afișat. Popover-urile sunt activate în mod implicit.

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

.popover('disable')

Elimină posibilitatea ca popover-ul unui element să fie afișat. Popover-ul va putea fi afișat numai dacă este reactivat.

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

.popover('toggleEnabled')

Comută posibilitatea ca popover-ul unui element să fie afișat sau ascuns.

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

.popover('update')

Actualizează poziția popover-ului unui element.

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

Evenimente

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