Source

Popovers

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

Visión general

Cosas que debe saber al usar el complemento popover:

  • Los popovers se basan 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!
  • Los popovers requieren el complemento de información sobre herramientas como una dependencia.
  • Si está compilando nuestro JavaScript desde la fuente, requiereutil.js .
  • Los popovers son opcionales por motivos de rendimiento, por lo que debe inicializarlos usted mismo .
  • La longitud cero titley contentlos valores 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.).
  • Activar popovers en elementos ocultos no funcionará.
  • Los popovers para elementos .disabledor disableddeben activarse en un elemento contenedor.
  • Cuando se activan 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 eliminen del DOM.

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

Ejemplo: Habilitar ventanas emergentes en todas partes

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

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

Ejemplo: Uso de la containeropción

Cuando tiene algunos estilos en un elemento principal que interfieren con una ventana emergente, querrá especificar un personalizado containerpara que el HTML de la ventana emergente aparezca dentro de ese elemento.

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

Ejemplo

<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: alineación superior, derecha, inferior e izquierda.

<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

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

Marcado específico requerido para descartar al 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.

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

Elementos deshabilitados

Los elementos con el disabledatributo no son interactivos, lo que significa que los usuarios no pueden pasar el mouse sobre ellos ni hacer clic en ellos para activar una ventana emergente (o información sobre herramientas). Como solución alternativa, deseará activar la ventana emergente desde un envoltorio <div>o <span>anular el pointer-eventselemento deshabilitado.

Para los activadores de ventanas emergentes deshabilitadas, también puede preferir data-trigger="hover"que la ventana emergente aparezca como una respuesta visual inmediata a sus usuarios, ya que es posible que no esperen hacer clic en un elemento deshabilitado.

<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 ventanas emergentes a través de JavaScript:

$('#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="".

Nombre Escribe Defecto Descripción
animación booleano verdadero Aplicar una transición de fundido CSS al popover
envase cadena | elemento | falso falso

Agrega el popover a un elemento específico. Ejemplo: container: 'body'. Esta opción es especialmente útil porque le permite colocar la ventana emergente en el flujo del documento cerca del elemento de activación, lo que evitará que la ventana emergente se aleje flotando del elemento de activación durante el cambio de tamaño de la ventana.
contenido cadena | elemento | función ''

Valor de contenido predeterminado si el data-contentatributo no está presente.

Si se proporciona una función, se llamará con su thisreferencia establecida en el elemento al que se adjunta el popover.
demora número | objeto 0

Retraso en mostrar y ocultar el popover (ms) - no se aplica al tipo de activación manual

Si se proporciona un número, la demora se aplica tanto para ocultar/mostrar

La estructura del objeto es:delay: { "show": 500, "hide": 100 }
html booleano falso Inserte HTML en la ventana emergente. Si es falso, se textusará el método de jQuery para insertar contenido en el DOM. Use texto si le preocupan los ataques XSS.
colocación cadena | función 'Correcto'

Cómo colocar el popover - automático | parte superior | abajo | izquierda | Correcto.
Cuando autose especifica, reorientará dinámicamente el popover.

Cuando se usa 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 falso Si se proporciona un selector, los objetos emergentes se delegarán a los destinos especificados. En la práctica, esto se usa para permitir que se agreguen popovers al contenido HTML dinámico. Vea esto y un ejemplo informativo .
modelo cuerda '<div class="popover" role="tooltip"><div class="arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'

HTML base para usar al crear el popover.

Los popover titlese inyectarán en el archivo .popover-header.

Los popover contentse inyectarán en el archivo .popover-body.

.arrowse convertirá en la flecha del popover.

El elemento contenedor más externo debe tener la .popoverclase.
título cadena | elemento | función ''

Valor de título predeterminado si titleel atributo no está presente.

Si se proporciona una función, se llamará con su thisreferencia establecida en el elemento al que se adjunta el popover.
generar cuerda 'hacer clic' Cómo se activa el popover: haga clic en | flotar | enfoque | manual. Puede pasar varios disparadores; sepáralos con un espacio. manualno se puede combinar con ningún otro disparador.
compensar número | cuerda 0 Desplazamiento del popover relativo a su destino. Para obtener más información, consulte los documentos de compensación de Popper.js .
ubicación alternativa cadena | formación 'dar la vuelta' Permita especificar qué posición usará Popper en la reserva. Para obtener más información, consulte los documentos de comportamiento de Popper.js.
Perímetro cadena | elemento 'padre de desplazamiento' Límite de restricción de desbordamiento del popover. Acepta los valores de 'viewport', 'window', 'scrollParent'o una referencia HTMLElement (solo JavaScript). Para obtener más información, consulte los documentos de preventOverflow de Popper.js .

Atributos de datos para ventanas emergentes individuales

Las opciones para ventanas emergentes individuales se pueden especificar alternativamente mediante el uso de atributos de datos, como se explicó anteriormente.

Métodos

Transiciones y métodos asíncronos

Todos los métodos de API son asíncronos e inician 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 de 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. Vuelve a la persona que llama antes de que se haya mostrado realmente el popover (es decir, antes de shown.bs.popoverque ocurra el evento). Esto se considera una activación "manual" del popover. Los popovers cuyo título y contenido tienen una longitud cero nunca se muestran.

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

.popover('hide')

Oculta el popover de un elemento. Vuelve 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.

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

.popover('toggle')

Alterna el popover de un elemento. Vuelve a la persona que llama antes de que se muestre u oculte el popover (es decir, antes de que ocurra el evento shown.bs.popovero ). hidden.bs.popoverEsto se considera una activación "manual" del popover.

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

.popover('dispose')

Oculta y destruye el popover de un elemento. Los popovers que usan delegación (que se crean usando la selectoropción ) no se pueden destruir individualmente en elementos desencadenantes descendientes.

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

.popover('enable')

Le da al popover de un elemento la capacidad de mostrarse. Los popovers están habilitados de manera predeterminada.

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

.popover('disable')

Elimina la capacidad de mostrar el popover de un elemento. El popover solo se podrá mostrar si se vuelve a habilitar.

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

.popover('toggleEnabled')

Alterna la capacidad de mostrar u ocultar la ventana emergente de un elemento.

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

.popover('update')

Actualiza la posición del popover de un elemento.

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

Eventos

Tipo de evento Descripción
mostrar.bs.popover Este evento se activa inmediatamente cuando showse llama al método de instancia.
mostrado.bs.popover Este evento se activa cuando el popover se hace visible para el usuario (esperará a que se completen las transiciones de CSS).
ocultar.bs.popover Este evento se activa inmediatamente cuando hidese llama al método de instancia.
oculto.bs.popover Este evento se activa cuando el popover ha terminado de ocultarse para el usuario (esperará a que se completen las transiciones de CSS).
insertado.bs.popover Este evento se activa después del show.bs.popoverevento cuando la plantilla de ventana emergente se ha agregado al DOM. 
$('#myPopover').on('hidden.bs.popover', function () {
  // do something…
})