Popovers

Visión general

Cosas que debe saber al usar el complemento popover:

• Los popovers se basan en la biblioteca de terceros Popper para el posicionamiento. ¡Debe incluir popper.min.js antes de bootstrap.js o usar bootstrap.bundle.min.js/ bootstrap.bundle.jsque contiene Popper para que funcionen los popovers!
• Los popovers requieren el complemento de información sobre herramientas como una dependencia.
• 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.
• Los popovers se pueden activar gracias a un elemento dentro de un shadow 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-bs-toggleatributo:

var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

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.

var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
  container: 'body'
})

Ejemplo

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-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. Las direcciones se reflejan cuando se usa Bootstrap en RTL.

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  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.

<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

var popover = new bootstrap.Popover(document.querySelector('.popover-dismiss'), {
  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, querrá activar la ventana emergente desde un envoltorio <div>o <span>, idealmente enfocable desde el teclado usando tabindex="0".

Para los activadores de ventanas emergentes deshabilitadas, también puede preferir data-bs-trigger="hover focus"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" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">
  <button class="btn btn-primary" type="button" disabled>Disabled button</button>
</span>

Hablar con descaro a

Variables

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              rgba($black, .2);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-bg:                 shade-color($popover-bg, 6%);
$popover-header-color:              $headings-color;
$popover-header-padding-y:          .5rem;
$popover-header-padding-x:          $spacer;

$popover-body-color:                $body-color;
$popover-body-padding-y:            $spacer;
$popover-body-padding-x:            $spacer;

$popover-arrow-width:               1rem;
$popover-arrow-height:              .5rem;
$popover-arrow-color:               $popover-bg;

$popover-arrow-outer-color:         fade-in($popover-border-color, .05);

Uso

Habilitar ventanas emergentes a través de JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, 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-bs-, como en data-bs-animation="". Asegúrese de cambiar el tipo de caso del nombre de la opción de camelCase a kebab-case al pasar las opciones a través de atributos de datos. Por ejemplo, en lugar de usar data-bs-customClass="beautifier", use data-bs-custom-class="beautifier".

Uso de la función conpopperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // use defaultBsPopperConfig if needed...
    // return newPopperConfig
  }
})

Métodos

mostrar

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 son ambos de longitud cero nunca se muestran.

myPopover.show()

ocultar

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.

myPopover.hide()

palanca

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.

myPopover.toggle()

disponer

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

myPopover.dispose()

habilitar

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

myPopover.enable()

deshabilitar

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

myPopover.disable()

alternar Habilitado

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

myPopover.toggleEnabled()

actualizar

Actualiza la posición del popover de un elemento.

myPopover.update()

obtener Instancia

Método estático que le permite obtener la instancia de popover asociada con un elemento DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

getOrCreateInstance

Método estático que le permite obtener la instancia de ventana emergente asociada con un elemento DOM, o crear uno nuevo en caso de que no se haya inicializado

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getOrCreateInstance(exampleTriggerEl) // Returns a Bootstrap popover instance

Eventos

var myPopoverTrigger = document.getElementById('myPopover')
myPopoverTrigger.addEventListener('hidden.bs.popover', function () {
  // do something...
})