El Popover en Bootstrap 5 es un componente que sirve para mostrar contenido en forma de una ventana chica que se abre al hacer click o pasar sobre un boton u otro componente.
El Popover es util para mostar texto de ayuda o opciones en nuestras aplicaciones.
Es como si fuera un tooltip pero el Popover muestra mas dise~o, a continuacion un popover.
Para usar los popover en Bootstrap es necesario usar la libreria Popper.min.js o usar la version de bootstrap que ya incluye Popper.js es: bootstrap.bundle.min.js
Codigo
El Popover en Bootstrap se crear o define de la siguiente manera.
<button type="button" data-bs-trigger="click" class="btn btn-btn btn-secondary" data-bs-placement="right" data-bs-toggle="popover" data-bs-title="Titulo del Popover" data-bs-content="Este es un ejemplo de Popover">Abrir Popover</button>
El popover se define dentro de la etiqueta de un boton o un enlace usando la clase data-bs-toggle=”popover” tambien es necesario definir otros atributos para personalizar el funcionamiento del popover.
- data-bs-tottle=”popover” atributo para definir el popover
- data-bs-placement=”right” Atributo para personalizar la Direccion donde se mostrara el Popover, los valores validos son: top, bottom, right, left (arriba, abajo, derecha, izquierda)
- data-bs-trigger=”click” Atributo para disparar el Popover, por default al hacer click, otros valores: focus, hover (focus: Al enfocar se abre y al desenfocar se cierra, hover: Al pasar el mouse sobre el se abre y al quitar el cursor se cierra)
- data-bs-title=”Titulo” Atributo para asignar el Titulo del Popover
- data-bs-content=”Contenido” Atributo para asignar el contenido del Popover
Activar el/los Popover
Para activar un Popover usaremos el siguiente codigo javascript.
<script type="text/javascript"> const elemento1 = document.getElementById('mypopover') const popover1 = new bootstrap.Popover(elemento1, {}); </script>
Para activar todos los popover vamos a usar el siguiente codigo javascript.
<script type="text/javascript"> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script>
Y listo ahora ya podemos usar y disfrutar los Popover en nuestros sitios o aplicaciones.
Codigo Completo
Este es el codigo completo del ejemplo.
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>Responsive Grid Bootstrap 5</title> <link rel="stylesheet" type="text/css" href="bootstrap-5/css/bootstrap.min.css"> </head> <body> <div class="container"> <div class="row"> <div class="col"> <h1>Popover en Bootstrap 5 by Evilnapsis</h1> <br><br><br><br> <button type="button" data-bs-trigger="click" id="mypopover" class="btn btn-btn btn-secondary" data-bs-placement="right" data-bs-toggle="popover" data-bs-title="Titulo del Popover" data-bs-content="Este es un ejemplo de Popover">Abrir Popover</button> <br><br><br><br> <button type="button" data-bs-trigger="click" class="btn btn-btn btn-secondary" data-bs-placement="right" data-bs-toggle="popover" data-bs-title="Titulo del Otro Popover" data-bs-content="Este es un Otro Ejemplo de Popover">Abrir Otro Popover</button> <br><br><br><br> <button type="button" data-bs-trigger="click" class="btn btn-btn btn-secondary" data-bs-placement="right" data-bs-toggle="popover" data-bs-title="Sobre Evilnapsis" data-bs-content="Evilnapsis Desarrollo de Software, Tutoriales y mas">Evilnapsis</button> </div> </div> </div> <script type="text/javascript" src="bootstrap-5/js/bootstrap.bundle.min.js"></script> <script type="text/javascript"> const popoverTriggerList = document.querySelectorAll('[data-bs-toggle="popover"]') const popoverList = [...popoverTriggerList].map(popoverTriggerEl => new bootstrap.Popover(popoverTriggerEl)) </script> </body> </html>
El resultado es el mismo que se muestra en la imagen de la parte de arriba
Descargar
Usar el siguiente link para descargar el ejemplo: https://www.dropbox.com/s/vyw2xz8p7d3627l/popovers1.zip?dl=0
Favor de Suscribirse y Reportar los Enlaces Rotos.