Popovers

A continuación, vamos a estudiar popovers:

Para poder utilizar los popovers en Bootstrap, debemos incluir la librería de terceros Popper.min.js, y está debe ser incluida antes de incluir bootstrap.bundle.min.js para que funcione.
Necesita popover plugin
El uso de un popover es opcional, por tanto en el caso de querer usarlo debemos ser nosotros quien lo inicialicemos.
Un título y contenido vacío, nunca se mostrará como popover
Especifica container:'body' para evitar problemas de renderizados en muchos componentes (como en los grupos de inputs que tiene Bootstrap, grupos de botones, etc.)
No funciona disparar un popover en elementos ocultos.
Los popovers en atributos o clases disabled deben ser activados en un elemento wrapper
Cuando disparamos un popover desde un hyperlink que contiene multiples líneas este debería ser centrado. Para ello usaremos .text-nowrap en nuestro elemento para evitar este comportamiento
Popovers deberían ser ocultos antes que sus correspondientes elementos HTML hayan sido eliminados del DOM.

Una forma de inicializar cualquier popover en una página web puede ser con el atributo data-bs-toggle:

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

<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">
  Popover on top
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="right" data-bs-content="Right popover">
  Popover on right
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="bottom" data-bs-content="Bottom popover">
  Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="left" data-bs-content="Left popover">
  Popover on left
</button>

<< Barra de progreso Scrollspy >>