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 bootstrap.jso usar uno bootstrap.bundle.min.jsque contenga Popper.
• Los popovers requieren el complemento popover como 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.

Ejemplos

Habilitar ventanas emergentes

Como se mencionó anteriormente, debe inicializar los popovers antes de poder usarlos. Una forma de inicializar todos los popovers en una página sería seleccionarlos por su data-bs-toggleatributo, así:

const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]')
const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl))

Demo en vivo

Usamos JavaScript similar al fragmento anterior para representar el siguiente popover en vivo. Los títulos se establecen mediante data-bs-titley el contenido del cuerpo se establece mediante data-bs-content.

<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" data-bs-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: superior, derecha, inferior e izquierda. Las direcciones se reflejan cuando se usa Bootstrap en RTL. Ajuste data-bs-placementpara cambiar la dirección.

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

Disfrazcontainer

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. Esto es común en tablas receptivas, grupos de entrada y similares.

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

Otra situación en la que querrá establecer un personalizado explícito containerson las ventanas emergentes dentro de un cuadro de diálogo modal , para asegurarse de que la ventana emergente en sí se agregue al modal. Esto es especialmente importante para las ventanas emergentes que contienen elementos interactivos: los cuadros de diálogo modales atraparán el foco, por lo que, a menos que la ventana emergente sea un elemento secundario de la ventana modal, los usuarios no podrán enfocar ni activar estos elementos interactivos.

const popover = new bootstrap.Popover('.example-popover', {
  container: '.modal-body'
})

Ventanas emergentes personalizadas

Puede personalizar la apariencia de las ventanas emergentes utilizando variables CSS . Establecemos una clase personalizada con data-bs-custom-class="custom-popover"el alcance de nuestra apariencia personalizada y la usamos para anular algunas de las variables CSS locales.

.custom-popover {
  --bs-popover-max-width: 200px;
  --bs-popover-border-color: var(--bs-primary);
  --bs-popover-header-bg: var(--bs-primary);
  --bs-popover-header-color: var(--bs-white);
  --bs-popover-body-padding-x: 1rem;
  --bs-popover-body-padding-y: .5rem;
}

<button type="button" class="btn btn-secondary"
        data-bs-toggle="popover" data-bs-placement="right"
        data-bs-custom-class="custom-popover"
        data-bs-title="Custom popover"
        data-bs-content="This popover is themed via CSS variables.">
  Custom popover
</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" data-bs-title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

const popover = new bootstrap.Popover('.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>

CSS

Variables

Como parte del enfoque de variables CSS en evolución de Bootstrap, los popovers ahora usan variables CSS locales .popoverpara mejorar la personalización en tiempo real. Los valores para las variables CSS se establecen a través de Sass, por lo que también se admite la personalización de Sass.

  --#{$prefix}popover-zindex: #{$zindex-popover};
  --#{$prefix}popover-max-width: #{$popover-max-width};
  @include rfs($popover-font-size, --#{$prefix}popover-font-size);
  --#{$prefix}popover-bg: #{$popover-bg};
  --#{$prefix}popover-border-width: #{$popover-border-width};
  --#{$prefix}popover-border-color: #{$popover-border-color};
  --#{$prefix}popover-border-radius: #{$popover-border-radius};
  --#{$prefix}popover-inner-border-radius: #{$popover-inner-border-radius};
  --#{$prefix}popover-box-shadow: #{$popover-box-shadow};
  --#{$prefix}popover-header-padding-x: #{$popover-header-padding-x};
  --#{$prefix}popover-header-padding-y: #{$popover-header-padding-y};
  @include rfs($popover-header-font-size, --#{$prefix}popover-header-font-size);
  --#{$prefix}popover-header-color: #{$popover-header-color};
  --#{$prefix}popover-header-bg: #{$popover-header-bg};
  --#{$prefix}popover-body-padding-x: #{$popover-body-padding-x};
  --#{$prefix}popover-body-padding-y: #{$popover-body-padding-y};
  --#{$prefix}popover-body-color: #{$popover-body-color};
  --#{$prefix}popover-arrow-width: #{$popover-arrow-width};
  --#{$prefix}popover-arrow-height: #{$popover-arrow-height};
  --#{$prefix}popover-arrow-border: var(--#{$prefix}popover-border-color);
  

Sass variables

$popover-font-size:                 $font-size-sm;
$popover-bg:                        $white;
$popover-max-width:                 276px;
$popover-border-width:              $border-width;
$popover-border-color:              var(--#{$prefix}border-color-translucent);
$popover-border-radius:             $border-radius-lg;
$popover-inner-border-radius:       subtract($popover-border-radius, $popover-border-width);
$popover-box-shadow:                $box-shadow;

$popover-header-font-size:          $font-size-base;
$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;

Uso

Habilitar ventanas emergentes a través de JavaScript:

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

Opciones

Como las opciones se pueden pasar a través de atributos de datos o JavaScript, puede agregar un nombre de opción a data-bs-, como en data-bs-animation="{value}". 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, use data-bs-custom-class="beautifier"en lugar de data-bs-customClass="beautifier".

A partir de Bootstrap 5.2.0, todos los componentes admiten un atributo de datos reservados experimentaldata-bs-config que puede albergar una configuración de componente simple como una cadena JSON. Cuando un elemento tiene atributos data-bs-config='{"delay":0, "title":123}'y , el valor final será y los atributos de datos separados anularán los valores dados en . Además, los atributos de datos existentes pueden albergar valores JSON como .data-bs-title="456"title456data-bs-configdata-bs-delay='{"show":0,"hide":150}'

Uso de la función conpopperConfig

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

Métodos

// getOrCreateInstance example
const popover = bootstrap.Popover.getOrCreateInstance('#example') // Returns a Bootstrap popover instance

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

Eventos

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