Popovers

Descripción general

Cosas que debes saber al usar el complemento popover:

• Los popovers se basan en la biblioteca 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 complemento tooltip como una dependencia.
• Los popovers son opcionales por motivos de rendimiento, por lo que debes inicializarlos tú mismo.
• Valores de longitud cero en title y content nunca mostrarán un popover.
• Especifica container: 'body' para evitar problemas de representación en componentes más complejos (como nuestros input groups, button groups, etc.).
• La activación de popovers en elementos ocultos no funcionará.
• Los popovers para los elementos .disabled o disabled deben activarse en un elemento padre contenedor.
• Cuando se activan desde enlaces que se envuelven en varias líneas, los popovers se centrarán entre el ancho total de los enlaces. Usa .text-nowrap en tus <a>s para evitar este comportamiento.
• Los popovers deben estar ocultos antes de que sus elementos correspondientes hayan sido eliminados del DOM.
• Los popovers se pueden activar gracias a un elemento dentro del 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 = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
})

Ejemplo: Uso de 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.

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?">Clic para alternar el 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 superior
</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 derecho
</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 inferior
</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 izquierdo
</button>

Descartar (cerrar) en el siguiente clic

Usa el disparador focus 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?">Descartar 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 por encima o hacer clic en ellos para activar un popover (o tooltip). Como solución alternativa, puedes activar el popover desde un contenedor <div> o <span>, idealmente enfocable desde el teclado usando tabindex="0".

Para activadores de popovers deshabilitados, también puedes preferir data-bs-trigger="hover focus" para que el popover aparezca como una respuesta visual inmediata a tus 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>Botón deshabilitado</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 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, agrega el nombre de la opción a data-bs-, como en data-bs-animation="". Asegúrate 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", usa data-bs-custom-class="beautifier".

Uso de la función con popperConfig

var popover = new bootstrap.Popover(element, {
  popperConfig: function (defaultBsPopperConfig) {
    // var newPopperConfig = {...}
    // usa defaultBsPopperConfig si es necesario...
    // return newPopperConfig
  }
})

Métodos

show

Revela el popover de un elemento. Regresa al punte de la llamada antes de que se haya mostrado realmente el popover (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. Regresa al punte de la llamada antes de que se haya ocultado realmente el popover (es decir, antes de que ocurra el evento hidden.bs.popover). Esto se considera una activación “manual” del popover.

myPopover.hide()

toggle

Alterna el popover de un elemento. Regresa al punte de la llamada antes de que se muestre u oculte el popover (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 elementos desencadenantes descendientes.

myPopover.dispose()

enable

Le da al popover de un elemento la capacidad de mostrarse. Las ventanas emergentes están habilitadas de manera predeterminada.

myPopover.enable()

disable

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

myPopover.disable()

setContent

Brinda una forma de cambiar el contenido del popover después de su inicialización.

myPopover.setContent({
  '.popover-header': 'another title',
  '.popover-body': 'another content'
})

toggleEnabled

Alterna 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 con un elemento DOM

var exampleTriggerEl = document.getElementById('example')
var popover = bootstrap.Popover.getInstance(exampleTriggerEl) // Devuelve una instancia del popover de Bootstrap

getOrCreateInstance

Método estático que te permite obtener la instancia 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) // Devuelve una instancia del popover de Bootstrap

Eventos

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