Bootstrap5 Popover
El control popover es similar al tooltip. Se muestra después de hacer clic en el elemento. A diferencia del tooltip, puede mostrar más contenido.
Cómo crear un popover
Agregando al elementodata-bs-toggle="popover"para crear el popover.
titleEl contenido del atributo es el título del popover,data-bs-contentel atributo muestra el contenido de texto del popover:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Título del popover" data-bs-content="Contenido del popover">Haz clic en mí varias veces</button>
Nota:El popover debe escribirse en el código de inicialización de JavaScript.
El siguiente ejemplo puede usar popovers en cualquier parte del documento:
Ejemplo
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
Pruébalo »
Especificar la posición del popover
Por defecto, el popover se muestra a la derecha del elemento.
Se puede usardata-bs-placementel atributo para configurar la dirección en que se muestra el popover: top, bottom, left o right:
Ejemplo
<a href="#" title="Título" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Soy la parte del contenido">Haz clic en mí</a>
<a href="#" title="Título" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Soy la parte del contenido">Haz clic en mí</a>
<a href="#" title="Título" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Soy la parte del contenido">Haz clic en mí</a>
<a href="#" title="Título" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Soy la parte del contenido">Haz clic en mí</a>
Pruébalo »
Cerrar popover
Por defecto, el popover se cierra al hacer clic nuevamente en el elemento especificado. Puede usardata-bs-trigger="focus"el atributo para configurar que se cierre al hacer clic fuera del elemento:
Ejemplo
<a href="#" title="Cancelar popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Haz clic en otro lugar del documento para cerrarme">Haz clic en mí</a>
Pruébalo »
Consejo:Si desea lograr el efecto de mostrar al mover el ratón sobre el elemento y desaparecer al quitarlo, puede usardata-bs-triggerel atributo, y establecer el valor en "hover":
Ejemplo
<a href="#" title="Título" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Algo de contenido">Mueve el ratón hacia mí</a>
Pruébalo » Otras extensiones