Source

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.

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

Es requereix un etiquetatge específic per a descartar el clic següent

Per a un comportament adequat entre navegadors i plataformes, heu d'utilitzar l' <a>etiqueta, no l' <button>etiqueta, i també heu d'incloure un tabindexatribut.

Popover descartable 
<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="".

Nom Tipus Per defecte Descripció
animació booleà veritat Apliqueu una transició d'esvaïment CSS al popover
contenidor cadena | element | fals fals

Afegeix la finestra emergent a un element específic. Exemple: container: 'body'. Aquesta opció és especialment útil perquè us permet situar el popover en el flux del document a prop de l'element activador, cosa que evitarà que el popover surti lluny de l'element activador durant un canvi de mida de la finestra.
contingut cadena | element | funció ''

Valor de contingut predeterminat si data-contentl'atribut no és present.

Si es dóna una funció, s'anomenarà amb la seva thisreferència establerta a l'element al qual està connectat el popover.
retard nombre | objecte 0

Retard per mostrar i amagar la finestra emergent (ms): no s'aplica al tipus d'activador manual

Si es proporciona un número, s'aplica un retard tant per ocultar com per mostrar

L'estructura de l'objecte és:delay: { "show": 500, "hide": 100 }
html booleà fals Inseriu HTML a la finestra emergent. Si és fals, texts'utilitzarà el mètode de jQuery per inserir contingut al DOM. Utilitzeu text si us preocupen els atacs XSS.
col·locació cadena | funció 'dret'

Com posicionar el popover - automàtic | dalt | baix | esquerra | dret.
Quan autos'especifica, reorientarà dinàmicament el popover.

Quan s'utilitza una funció per determinar la ubicació, es crida amb el node DOM emergent com a primer argument i el node DOM de l'element activador com a segon. El thiscontext s'estableix a la instància emergent.
selector cadena | fals fals Si es proporciona un selector, els objectes emergents es delegaran als objectius especificats. A la pràctica, això s'utilitza per permetre que el contingut HTML dinàmic s'afegeixi popovers. Vegeu això i un exemple informatiu .
plantilla corda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML base per utilitzar quan es crea el popover.

Els popover's titles'injectaran al .popover-header.

Els popover's contents'injectaran al .popover-body.

.arrowes convertirà en la fletxa del popover.

L'element d'embolcall més extern hauria de tenir la .popoverclasse.
títol cadena | element | funció ''

Valor del títol predeterminat si titlel'atribut no és present.

Si es dóna una funció, s'anomenarà amb la seva thisreferència establerta a l'element al qual està connectat el popover.
disparador corda 'clic' Com s'activa el popover - feu clic a | flotar | focus | manual. Podeu passar múltiples activadors; separeu-los amb un espai. manualno es pot combinar amb cap altre activador.
compensació nombre | corda 0 Desplaçament del popover en relació amb el seu objectiu. Per obtenir més informació, consulteu els documents d' offset de Popper.js .
col·locació alternativa cadena | matriu 'flip' Permet especificar quina posició utilitzarà Popper a la alternativa. Per obtenir més informació, consulteu els documents de comportament de Popper.js
límit cadena | element 'scrollParent' Límit de restricció de desbordament del popover. Accepta els valors de 'viewport', 'window', 'scrollParent', o una referència HTMLElement (només JavaScript). Per obtenir més informació, consulteu els documents preventOverflow de Popper.js .

Atributs de dades per a popovers individuals

Les opcions per a popovers individuals es poden especificar alternativament mitjançant l'ús d'atributs de dades, tal com s'ha explicat anteriorment.

Mètodes

Mètodes asíncrons i transicions

Tots els mètodes de l'API són asíncrons i comencen una transició . Tornen a la persona que truca tan bon punt s'inicia la transició però abans que acabi . A més, s'ignorarà una trucada de mètode en un component en transició .

Consulteu la nostra documentació de JavaScript per obtenir més informació.

$().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

Tipus d'esdeveniment Descripció
show.bs.popover Aquest esdeveniment s'activa immediatament quan showes crida al mètode d'instància.
mostrat.bs.popover Aquest esdeveniment s'activa quan la finestra emergent s'ha fet visible per a l'usuari (esperarà que finalitzin les transicions CSS).
hide.bs.popover Aquest esdeveniment s'activa immediatament quan hides'ha cridat el mètode d'instància.
hidden.bs.popover Aquest esdeveniment s'activa quan la finestra emergent s'ha acabat d'ocultar per a l'usuari (esperarà que finalitzin les transicions CSS).
inserit.bs.popover Aquest esdeveniment s'activa després de l' show.bs.popoveresdeveniment quan s'ha afegit la plantilla popover al DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})