Evilnapsis

Programming, Hacking and More

Web Development

Crear Popovers con Bootstrap 5

Agustin Ramos

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

Resultado del Ejemplo Prueba Popovers Bs 5

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.

Agustin Ramos

Desarrollador de Software