Popovers

Descripción general

Cosas a saber cuando se usa el plugin popover:

• Los popovers dependen de la librería de terceros Popper para el posicionamiento. Debes incluir popper.min.js antes de bootstrap.js o usar bootstrap.bundle.min.js / bootstrap.bundle.js que contiene Popper para que los popovers funcionen.
• Los popovers requieren el plugin de tooltip como dependencia.
• Los popovers son opt-in por razones de rendimiento, por lo que debes inicializarlos tú mismo.
• Los valores de title y content de longitud cero nunca mostrarán un popover.
• Especifica container: 'body' para evitar problemas de renderizado 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 .disabled o disabled deben activarse desde un elemento contenedor.
• Cuando se activan desde anclas que se envuelven en múltiples líneas, los popovers se centrarán entre el ancho total de las anclas. Usa .text-nowrap en tus <a> para evitar este comportamiento.
• Los popovers deben ocultarse antes de que sus elementos correspondientes hayan sido eliminados del DOM.
• Los popovers pueden activarse gracias a un elemento dentro de un shadow DOM.

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 atributo data-bs-toggle:

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

Ejemplo: Usando la opción container

Cuando tienes algunos estilos en un elemento padre que interfieren con un popover, querrás especificar un container personalizado para que el HTML del popover aparezca dentro de ese elemento en su lugar.

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: alineado arriba, derecha, abajo 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>

Cerrar al siguiente clic

Usa el disparador focus para cerrar los popovers en el siguiente clic del usuario en un elemento diferente al elemento conmutador.

<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 atributo disabled no son interactivos, lo que significa que los usuarios no pueden pasar el cursor o hacer clic en ellos para activar un popover (o tooltip). Como solución alternativa, querrás activar el popover desde un <div> o <span> contenedor, idealmente enfocable por teclado usando tabindex="0".

Para los disparadores de popover deshabilitados, también puedes preferir data-bs-trigger="hover focus" para que el popover aparezca como retroalimentación visual inmediata para tus usuarios ya que pueden no esperar 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>

Sass

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 popovers vía JavaScript:

var exampleEl = document.getElementById('example')
var popover = new bootstrap.Popover(exampleEl, options)

Opciones

Las opciones se pueden pasar vía atributos data o JavaScript. Para los atributos data, añade el nombre de la opción a data-bs-, como en data-bs-animation="". Asegúrate de cambiar el tipo de capitalización del nombre de la opción de camelCase a kebab-case cuando pases las opciones vía atributos data. Por ejemplo, en lugar de usar data-bs-customClass="beautifier", usa data-bs-custom-class="beautifier".

Usar una función con popperConfig

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

Métodos

show

Muestra el popover de un elemento. Vuelve al llamador antes de que el popover se haya mostrado realmente (es decir, antes de que ocurra el evento shown.bs.popover). 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()

hide

Oculta el popover de un elemento. Vuelve al llamador antes de que el popover se haya ocultado realmente (es decir, antes de que ocurra el evento hidden.bs.popover). Esto se considera una activación "manual" del popover.

myPopover.hide()

toggle

Conmuta el popover de un elemento. Vuelve al llamador antes de que el popover se haya mostrado u ocultado realmente (es decir, antes de que ocurra el evento shown.bs.popover o hidden.bs.popover). Esto se considera una activación "manual" del popover.

myPopover.toggle()

dispose

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 opción selector) no se pueden destruir individualmente en los elementos disparadores descendientes.

myPopover.dispose()

enable

Da a un elemento la capacidad de mostrar su popover. Los popovers están habilitados por defecto.

myPopover.enable()

disable

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

myPopover.disable()

toggleEnabled

Conmuta la capacidad de mostrar u ocultar el popover de un elemento.

myPopover.toggleEnabled()

update

Actualiza la posición del popover de un elemento.

myPopover.update()

getInstance

Método estático que te permite obtener la instancia de popover asociada a un elemento del DOM

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

getOrCreateInstance

Método estático que te permite obtener la instancia de popover asociada a un elemento del DOM, o crear una nueva en caso de que no haya sido inicializada

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...
})