14/9/2019 Popovers · Bootstrap

Popovers
Documentación y ejemplos para agregar elementos emergentes de
Bootstrap, como los que se encuentran en iOS, a cualquier elemento de
su sitio.

Pruebe DigitalOcean hoy y

obtenga un crédito gratis
de $ 50 a
través de Carbon

Visión de conjunto
Cosas que debe saber al usar el complemento popover:

Popovers confía en la biblioteca de terceros Popper.js para el posicionamiento. ¡Debe incluir

popper.min.js antes de bootstrap.js o usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque
contiene Popper.js para que funcionen los popovers!
Las ventanas emergentes requieren el complemento de información sobre herramientas como
una dependencia.
Si está construyendo nuestro JavaScript desde la fuente, lo requiereutil.js .
Las ventanas emergentes son opcionales por razones de rendimiento, por lo que debe
inicializarlas usted mismo .
La longitud cero titley los contentvalores nunca mostrarán un popover.
Especifique container: 'body'para evitar problemas de representación en componentes más
complejos (como nuestros grupos de entrada, grupos de botones, etc.).
La activación de elementos emergentes en elementos ocultos no funcionará.
Los elementos emergentes para .disabledo disabledelementos deben activarse en un elemento
contenedor.
Cuando se activa desde anclas que se envuelven en varias líneas, los popovers se centrarán entre
el ancho total de las anclas. Úselo .text-nowrapen su <a>s para evitar este comportamiento.
Los popovers deben ocultarse antes de que sus elementos correspondientes se hayan eliminado
del DOM.
Los popovers se pueden activar gracias a un elemento dentro de un DOM de sombra.

El efecto de animación de este componente depende de la prefers-reduced-motionconsulta de

medios. Consulte la sección de movimiento reducido de nuestra documentación de
accesibilidad .

Sigue leyendo para ver cómo funcionan los popovers con algunos ejemplos.

Ejemplo: habilitar popovers en todas partes

Una forma de inicializar todos los popovers en una página sería seleccionarlos por su data-
toggleatributo:

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

https://getbootstrap.com/docs/4.3/components/popovers/ 1/7
14/9/2019 Popovers · Bootstrap

Ejemplo: uso de la containeropción

Cuando tenga algunos estilos en un elemento primario que interfieran con un popover, deberá
especificar una containeropción personalizada para que el HTML del popover aparezca dentro de ese
elemento.

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

Ejemplo

Haga clic para alternar popover

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

Cuatro direcciones
Hay cuatro opciones disponibles: superior, derecha, inferior e izquierda alineadas.

Popover en la parte superior Popover a la derecha Popover en la parte inferior

Popover a la izquierda

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

Descartar en el siguiente clic

Use el focusdisparador para descartar popovers en el siguiente clic del usuario en un elemento
diferente al elemento de alternancia.

https://getbootstrap.com/docs/4.3/components/popovers/ 2/7
14/9/2019 Popovers · Bootstrap

Marcado específico requerido para descartar en el siguiente

clic
Para un comportamiento adecuado entre navegadores y plataformas, debe usar la <a>etiqueta,
no la <button>etiqueta, y también debe incluir un tabindexatributo.

Popover descartable

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

Copiar
$('.popover-dismiss').popover({
trigger: 'focus'
})

Elementos deshabilitados
Los elementos con el disabledatributo no son interactivos, lo que significa que los usuarios no
pueden desplazarse ni hacer clic en ellos para activar un popover (o información sobre herramientas).
Como solución alternativa, querrá activar el popover desde un contenedor <div>o <span>anular el
pointer-eventselemento deshabilitado.

Para los activadores de popover deshabilitados, también puede preferir data-trigger="hover"que el

popover aparezca como una respuesta visual inmediata para sus usuarios, ya que es posible que no
esperen hacer clic en un elemento deshabilitado.

Botón deshabilitado

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

Uso
Habilitar popovers a través de JavaScript:

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

Opciones
Las opciones se pueden pasar a través de atributos de datos o JavaScript. Para los atributos de datos,
agregue el nombre de la opción a data-, como en data-animation="".

Tenga en cuenta que por razones de seguridad sanitize, las opciones , sanitizeFny
whiteListno se pueden suministrar utilizando atributos de datos.

Nombre Tipo Defecto Descripción

https://getbootstrap.com/docs/4.3/components/popovers/ 3/7
14/9/2019 Popovers · Bootstrap

Nombre Tipo Defecto Descripción

animación booleano cierto Aplicar una transición de desvanecimiento CSS al

popover

envase cadena | falso Agrega el popover a un elemento específico.

elemento | Ejemplo: container: 'body'. Esta opción es
falso particularmente útil porque le permite colocar el
popover en el flujo del documento cerca del
elemento desencadenante, lo que evitará que el
popover flote lejos del elemento
desencadenante durante el cambio de tamaño
de la ventana.

contenido cadena | '' Valor de contenido predeterminado si el data-

elemento | contentatributo no está presente.
función
Si se proporciona una función, se llamará con su
thisconjunto de referencia al elemento al que
está unido el popover.

retrasar numero | 00 Retraso que muestra y oculta el popover (ms):

objeto no se aplica al tipo de disparo manual

Si se proporciona un número, el retraso se aplica

a ambos ocultar / mostrar

La estructura del objeto es: delay: { "show":

500, "hide": 100 }

html booleano falso Insertar HTML en el popover. Si es falso, el

textmétodo de jQuery se usará para insertar
contenido en el DOM. Use texto si le preocupan
los ataques XSS.

colocación cadena | 'derecho' Cómo colocar el popover - auto | arriba | parte

función inferior | izquierda | derecho.
Cuando autose especifica, reorientará
dinámicamente el popover.

Cuando se utiliza una función para determinar la

ubicación, se llama con el nodo DOM emergente
como primer argumento y el nodo DOM del
elemento desencadenante como segundo. El
thiscontexto se establece en la instancia de
popover.

selector cadena | falso Si se proporciona un selector, los objetos

falso emergentes se delegarán a los objetivos
especificados. En la práctica, esto se usa para
permitir que el contenido HTML dinámico tenga
popovers agregados. Vea esto y un ejemplo
informativo .

https://getbootstrap.com/docs/4.3/components/popovers/ 4/7
14/9/2019 Popovers · Bootstrap

Nombre Tipo Defecto Descripción

modelo cuerda '<div Base HTML para usar al crear el popover.

class="popo
ver"
El popover titlese inyectará en el .popover-
header.
role="toolt
ip"><div
El popover contentse inyectará en el .popover-
class="arro
body.
w"></div>
<h3 .arrow se convertirá en la flecha del popover.
class="popo
ver-
El elemento envoltorio más externo debe tener
header">
la .popoverclase
</h3><div
class="popo
ver-body">
</div>
</div>'

título cadena | '' Valor de título predeterminado si el

elemento | titleatributo no está presente.
función
Si se proporciona una función, se llamará con su
thisconjunto de referencia al elemento al que
está unido el popover.

desencadenar cuerda 'hacer clic' Cómo se activa el popover: haga clic en | flotar |
enfoque | manual. Puede pasar múltiples
disparadores; separarlos con un espacio.
manualno se puede combinar con ningún otro
disparador.

compensar numero | 00 Desplazamiento del popover en relación con su

cuerda objetivo. Para obtener más información, consulte
los documentos de desplazamiento de Popper.js
.

emplazamiento cadena | 'dar la Permitir especificar qué posición utilizará Popper

formación vuelta' en la reserva. Para obtener más información,
consulte los documentos de comportamiento de
Popper.js

límite cadena | 'scrollParent' Límite de restricción de desbordamiento del

elemento popover. Acepta los valores de 'viewport',
'window', 'scrollParent', o una referencia de
HTMLElement (JavaScript solamente). Para
obtener más información, consulte los
documentos preventOverflow de Popper.js .

desinfectar booleano cierto Habilita o deshabilita la desinfección. Si se activa

'template', 'content'y 'title'se desinfectan
opciones.

whiteList objeto Valor por Objeto que contiene atributos y etiquetas

defecto permitidos

sanitizeFn nulo | nulo Aquí puede suministrar su propia función de

función desinfección. Esto puede ser útil si prefiere usar
una biblioteca dedicada para realizar la
desinfección.

https://getbootstrap.com/docs/4.3/components/popovers/ 5/7
14/9/2019 Popovers · Bootstrap

Atributos de datos para popovers individuales

Alternativamente, las opciones para popovers individuales se pueden especificar mediante el
uso de atributos de datos, como se explicó anteriormente.

Métodos

Métodos asíncronos y transiciones

Todos los métodos API son asíncronos y comienzan una transición . Vuelven a la persona que
llama tan pronto como se inicia la transición, pero antes de que finalice . Además, se ignorará
una llamada al método en un componente en transición .

Consulte nuestra documentación de JavaScript para obtener más información .

$().popover(options)
Inicializa popovers para una colección de elementos.

.popover('show')
Revela el popover de un elemento. Regresa a la persona que llama antes de que se muestre el
popover (es decir, antes de shown.bs.popoverque ocurra el evento). Esto se considera una activación
"manual" del popover. Las ventanas emergentes cuyo título y contenido son de longitud cero nunca
se muestran.

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

.popover('hide')
Oculta el popover de un elemento. Regresa a la persona que llama antes de que se haya ocultado
el popover (es decir, antes de hidden.bs.popoverque ocurra el evento). Esto se considera una
activación "manual" del popover.

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

.popover('toggle')
Alterna el popover de un elemento. Vuelve a la persona que llama antes de que el popover
realidad ha demostrado u oculto (es decir, antes de que el shown.bs.popovero
hidden.bs.popoverevento ocurre). Esto se considera una activación "manual" del popover.

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

Search...
.popover('dispose')
Oculta y destruye el popover de un elemento. Los popovers que usan delegación (que se crean
Empezando usando la selectoropción ) no pueden destruirse individualmente en elementos desencadenantes
Diseño descendientes.

Contenido
Copiar
$('#element').popover('dispose')
Componentes
Alertas
.popover('enable')
Distintivo
Le da al popover de un elemento la capacidad de mostrarse. Los popovers están habilitados de
Migaja de pan
forma predeterminada.
Botones

Grupo de botones Copiar

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

C l
https://getbootstrap.com/docs/4.3/components/popovers/ 6/7
14/9/2019 Popovers · Bootstrap
Carrusel

Colapso .popover('disable')
Listas deplegables Elimina la capacidad de mostrar el popover de un elemento. El popover solo se podrá mostrar si se
Formas vuelve a habilitar.

Grupo de entrada
Copiar
Jumbotron $('#element').popover('disable')

Lista de grupo

Objeto multimedia
.popover('toggleEnabled')
Modal
Alterna la capacidad de mostrar u ocultar el elemento emergente de un elemento.
Navs

Barra de navegación Copiar

$('#element').popover('toggleEnabled')
Paginación

Popovers

Progreso .popover('update')
Scrollspy Actualiza la posición del popover de un elemento.
Hiladores
Copiar
Tostadas $('#element').popover('update')
Información sobre herramientas

Utilidades Eventos
Ampliar
Tipo de evento Descripción
Migración

Acerca de show.bs.popover Este evento se dispara inmediatamente cuando showse llama al método de
instancia.

se Este evento se activa cuando el popover se ha hecho visible para el usuario

muestra.bs.popover (esperará a que se completen las transiciones CSS).

hide.bs.popover Este evento se dispara inmediatamente cuando hidese llama al método de

instancia.

hidden.bs.popover Este evento se activa cuando el popover ha terminado de ocultarse al

usuario (esperará a que se completen las transiciones CSS).

insert.bs.popover Este evento se desencadena después del show.bs.popoverevento cuando la

plantilla de popover se ha agregado al DOM.

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

https://getbootstrap.com/docs/4.3/components/popovers/ 7/7