Popovers

Documentació i exemples per afegir finestres emergents Bootstrap, com les que es troben a iOS, a qualsevol element del vostre lloc.

Visió general

Coses a saber quan s'utilitza el connector popover:

• Els popovers depenen de la biblioteca de tercers Popper.js per al posicionament. Heu d'incloure popper.min.js abans de bootstrap.js o utilitzar bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper.js perquè funcionin els popovers!
• Els popovers requereixen el connector tooltip com a dependència.
• Si esteu creant el nostre JavaScript des de la font, requereixutil.js .
• Els popovers estan activats per raons de rendiment, de manera que els heu d'inicialitzar vosaltres mateixos .
• La longitud zero titlei contentels valors mai no mostraran un popover.
• Especifiqueu container: 'body'per evitar problemes de renderització en components més complexos (com els nostres grups d'entrada, grups de botons, etc.).
• No funcionarà activar popovers en elements ocults.
• Els popovers per .disabledo disabledelements s'han d'activar en un element d'embolcall.
• Quan s'activa des d'ancoratges que s'emboliquen a través de diverses línies, els popovers es centraran entre l'amplada total dels ancoratges. Utilitzeu .text-nowrap-lo <a>per evitar aquest comportament.
• Els popovers s'han d'amagar abans que els seus elements corresponents s'hagin eliminat del DOM.
• Els popovers es poden activar gràcies a un element dins d'un DOM ombra.

Segueix llegint per veure com funcionen els popovers amb alguns exemples.

Exemple: habiliteu les finestres emergents a tot arreu

Una manera d'inicialitzar totes les finestres emergents d'una pàgina seria seleccionar-les pel seu data-toggleatribut:

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

Exemple: ús de l' containeropció

Quan tingueu alguns estils en un element pare que interfereixen amb un popover, voldreu especificar un personalitzat containerperquè l'HTML del popover aparegui dins d'aquest element.

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

Exemple

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

Quatre direccions

Hi ha quatre opcions disponibles: superior, dreta, inferior i alineada a l'esquerra.

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

Omet al següent clic

Utilitzeu el focusdisparador per descartar les finestres emergents al següent clic de l'usuari en un element diferent de l'element de commutació.

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

Elements inhabilitats

Els elements amb l' disabledatribut no són interactius, és a dir, els usuaris no poden passar-hi el cursor ni fer-hi clic per activar una finestra emergent (o informació sobre eines). Com a solució alternativa, voldreu activar el popover des d'un embolcall <div>o <span>anul·lar l' pointer-eventselement desactivat.

Per als activadors de popover desactivats, també podeu preferir data-trigger="hover"que el popover aparegui com a comentari visual immediat als vostres usuaris, ja que potser no esperen fer clic en un element desactivat.

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

Ús

Activa les finestres emergents mitjançant JavaScript:

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

Opcions

Les opcions es poden passar mitjançant atributs de dades o JavaScript. Per als atributs de dades, afegiu el nom de l'opció a data-, com a data-animation="".

Mètodes

$().popover(options)

Inicialitza les finestres emergents per a una col·lecció d'elements.

.popover('show')

Revela el popover d'un element. Torna a la persona que truca abans que s'hagi mostrat realment el popover (és a dir, abans shown.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover. Les finestres emergents tant el títol com el contingut són de longitud zero mai es mostren.

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

.popover('hide')

Amaga la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi amagat (és a dir, abans hidden.bs.popoverque es produeixi l'esdeveniment). Això es considera una activació "manual" del popover.

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

.popover('toggle')

Activa o desactiva la finestra emergent d'un element. Torna a la persona que truca abans que el popover s'hagi mostrat o amagat (és a dir, abans que es produeixi l'esdeveniment shown.bs.popovero ). hidden.bs.popoverAixò es considera una activació "manual" del popover.

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

.popover('dispose')

Amaga i destrueix el popover d'un element. Els popovers que utilitzen la delegació (que es creen amb l' selectoropció ) no es poden destruir individualment en elements activadors descendents.

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

.popover('enable')

Ofereix la possibilitat de mostrar-se al popover d'un element. Les finestres emergents estan habilitades de manera predeterminada.

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

.popover('disable')

Elimina la possibilitat que es mostri la finestra emergent d'un element. La finestra emergent només es podrà mostrar si es torna a habilitar.

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

.popover('toggleEnabled')

Activa o desactiva la possibilitat de mostrar o amagar la finestra emergent d'un element.

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

.popover('update')

Actualitza la posició de la finestra emergent d'un element.

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

Esdeveniments

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