in English

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 confien en la biblioteca de tercers Popper per al posicionament. Heu d'incloure popper.min.js abans de bootstrap.js o utilitzar bootstrap.bundle.min.js/ bootstrap.bundle.jsque conté Popper 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.
De manera predeterminada, aquest component utilitza el desinfectador de contingut integrat, que elimina tots els elements HTML que no estan permesos explícitament. Consulteu la secció desinfectant de la nostra documentació de JavaScript per obtenir més detalls.
L'efecte d'animació d'aquest component depèn de la prefers-reduced-motionconsulta de mitjans. Consulteu la secció de moviment reduït de la nostra documentació d'accessibilitat .

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

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)
Acceleració de la GPU

Les finestres emergents de vegades apareixen borroses als dispositius Windows 10 a causa de l'acceleració de la GPU i un DPI del sistema modificat. La solució per a això a la v4 és desactivar l'acceleració de la GPU segons sigui necessari als vostres popovers.

Correcció suggerida:

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

Fer que les finestres emergents funcionin per als usuaris de teclat i tecnologia d'assistència

Per permetre que els usuaris del teclat activin les vostres finestres emergents, només hauríeu d'afegir-les als elements HTML que tradicionalment es poden centrar en el teclat i interactius (com ara enllaços o controls de formulari). Tot i que els elements HTML arbitraris (com ara <span>s) es poden enfocar afegint l' tabindex="0"atribut, això afegirà tabulacions potencialment molestes i confuses en elements no interactius per als usuaris del teclat, i la majoria de les tecnologies d'assistència actualment no anuncien el contingut del popover en aquesta situació. . A més, no us confieu únicament hovercom a activador dels vostres popovers, ja que això els farà impossibles d'activar per als usuaris del teclat.

Tot i que podeu inserir HTML ric i estructurat a les finestres emergents amb l' htmlopció, us recomanem fermament que eviteu afegir una quantitat excessiva de contingut. La manera com funcionen actualment les finestres emergents és que, un cop es mostren, el seu contingut està lligat a l'element activador amb l' aria-describedbyatribut. Com a resultat, la totalitat del contingut del popover s'anunciarà als usuaris de tecnologia d'assistència com un flux llarg i ininterromput.

A més, tot i que també és possible incloure controls interactius (com ara elements de formulari o enllaços) a la finestra emergent (afegint aquests elements als whiteListatributs i etiquetes permesos), tingueu en compte que actualment la finestra emergent no gestiona l'ordre de focus del teclat. Quan un usuari de teclat obre una finestra emergent, el focus es manté en l'element activador, i com que la finestra emergent normalment no segueix immediatament l'activador a l'estructura del document, no hi ha cap garantia que s'avança/premTABmourà un usuari del teclat a la finestra emergent. En resum, només afegir controls interactius a un popover és probable que aquests controls siguin inabastables/inutilitzables per als usuaris del teclat i els usuaris de tecnologies d'assistència, o, si més no, un ordre d'enfocament global il·lògic. En aquests casos, considereu utilitzar un diàleg modal.

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

Tingueu en compte que, per raons de seguretat, les opcions sanitize, sanitizeFni whiteListno es poden proporcionar mitjançant atributs de dades.
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 .
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
classe personalitzada cadena | funció ''

Afegiu classes a la finestra emergent quan es mostri. Tingueu en compte que aquestes classes s'afegiran a més de les classes especificades a la plantilla. Per afegir diverses classes, separeu-les amb espais: 'a b'.

També podeu passar una funció que hauria de retornar una única cadena que contingui noms de classe addicionals.
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 .
desinfectar booleà veritat Activa o desactiva la desinfecció. Si està activat 'template', 'content'i 'title'les opcions es desinfectaran. Consulteu la secció desinfectant a la nostra documentació de JavaScript .
llista blanca objecte Valor per defecte Objecte que conté atributs i etiquetes permesos
desinfectarFn nul | funció nul Aquí podeu proporcionar la vostra pròpia funció de desinfecció. Això pot ser útil si preferiu utilitzar una biblioteca dedicada per realitzar la desinfecció.
popperConfig nul | objecte nul Per canviar la configuració de Popper per defecte de Bootstrap, consulteu la configuració de Popper

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 el títol i el contingut dels quals 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...
})