Entrada

Qué son y cómo crear Popover en Bootstrap 5

Publicado
1 min de lectura
Bootstrap: Qué son y cómo crear Popover en Bootstrap 5

En Bootstrap 5, un popover es un pequeño cuadro emergente que aparece al hacer clic o pasar el mouse sobre un elemento, mostrando información adicional.

1. Incluir Bootstrap 5

Para crear y usar los Popover, asegúrate de tener el CSS y JS (incluye Popper, que es necesario para los popovers):

1
2
3

<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet">

<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>

2. Crear un botón con popover

1
2
3
4
5
6
7

<button type="button"
        class="btn btn-primary"
        data-bs-toggle="popover"
        data-bs-title="Título del popover"
        data-bs-content="Este es el contenido del popover">
    Haz clic
</button>

3. Activar los popovers (paso importante)

Bootstrap no los activa automáticamente, debes incializarlos con JS:

1
2
3
4

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

4. Opciones útiles

Cambiar el tipo de evento:

1

data-bs-trigger="hover"

También puedes usar:

  • click (por defecto)
  • hover
  • focus
  • combinaciones: "hover focus"

Posición del popover:

1

data-bs-placement="top"

También puedes usar las opciones:

  • top
  • bottom
  • left
  • right

Permitir HTML dentro del contenido:

1
2

data-bs-html="true"
data-bs-content="<b>Texto en negrita</b>"
Bootstrap , Extras
Esta entrada está licenciada bajo CC BY 4.0 por el autor.