Cuadro emergente Bootstrap 5

Cuadro emergente

El componente de cuadro emergente (Popover) es similar a la herramienta de sugerencias; es un cuadro emergente que aparece al hacer clic en un elemento. La diferencia radica en que el cuadro emergente puede contener más contenido.

Cómo crear un cuadro emergente

Para crear un cuadro emergente, asegúrese de que data-bs-toggle="popover" La propiedad se agrega al elemento.

Utilice title La propiedad especifica el texto del título del cuadro emergente y utiliza data-bs-content La propiedad especifica el texto que se muestra en el cuerpo del cuadro emergente:

<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Título del cuadro emergente" data-bs-content="Algunos contenidos dentro del cuadro emergente">Conmutar cuadro emergente</button>

Nota:Los cuadros emergentes deben inicializarse con JavaScript para funcionar.

El siguiente código habilitará todos los cuadros emergentes en el documento:

Ejemplo

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

Pruebe personalmente

Posicionar el cuadro emergente

Por defecto, el cuadro emergente se mostrará en el lado derecho del elemento.

Utilice data-bs-placement Configurar la posición del cuadro emergente en la parte superior, inferior, izquierda o derecha del elemento:

Ejemplo

<a href="#" title="Encabezado" data-bs-toggle="popover" data-bs-placement="arriba" data-content="Contenido">Arriba</a>
<a href="#" title="Encabezado" data-bs-toggle="popover" data-bs-placement="abajo" data-content="Contenido">Abajo</a>
<a href="#" title="Encabezado" data-bs-toggle="popover" data-bs-placement="left" data-content="Contenido">Izquierda</a>
<a href="#" title="Encabezado" data-bs-toggle="popover" data-bs-placement="right" data-content="Contenido">Derecha</a>

Pruebe personalmente

Nota:Si no hay suficiente espacio, el atributo placement no funcionará como se espera. Por ejemplo: si usa el atributo de colocación top en la parte superior de la página (sin espacio reservado), se mostrará en la parte inferior o lateral del elemento (donde haya espacio).

Cerrar ventana emergente

Por defecto, al hacer clic nuevamente en el elemento se cerrará la ventana emergente. Pero, puede usar data-bs-trigger="focus" Atributo, configurar este atributo permitirá cerrar la ventana emergente al hacer clic fuera del elemento:

Ejemplo

<a href="#" title="Ventana emergente desechable" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Haga clic en cualquier lugar del documento para cerrar esta ventana emergente">Haga clic aquí</a>

Pruebe personalmente

Ventana emergente de suspensión

Consejo:Si desea que se muestre la ventana emergente cuando el puntero del ratón se mueva sobre el elemento, utilice el valor "hover" de data-bs-trigger Atributo:

Ejemplo

<a href="#" title="Encabezado" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Texto emergente">Pase el ratón sobre mí</a>

Pruebe personalmente