Actualmente estoy tratando de incorporar algunos popovers en mi página web, pero me encontré con una pared.

Creé algunos botones emergentes en mi pie de página, pero no sucede nada cuando haces clic en ellos.

Creé un archivo js para la inicialización y lo importé al final de mi página, junto con el paquete de arranque necesario para ejecutarlo, pero recibo un error en la consola, que es:

 Uncaught TypeError: i.createPopper is not a function at Fe.show (tooltip.js:273:29) at Fe._enter (tooltip.js:598:15) at Fe.toggle (tooltip.js:191:17) at HTMLButtonElement.<anonymous> (tooltip.js:532:107) at HTMLButtonElement.i (event-handler.js:102:15)

Mi código completo está abajo. ¡Gracias!

Scripts en documento HTML:

 <script src="popover.js"></script> <script src="node_modules/jquery/dist/jquery.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.4.1/jquery.min.js"> </script> <script src="node_modules/@popperjs/core/dist/umd/popper.min.js"></script> <script src="node_modules/bootstrap/dist/js/bootstrap.bundle.js"></script> <script src="function.js"></script>

El html para los popovers:

 <ul class="list-inline"> <li class="list-inline-item"> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Home</button> </li> <li class="list-inline-item"> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- toggle="popover" data-bs-placement="top" data-bs-content="Home Page">About</button> </li> <li class="list-inline-item"> <button type="button" class="btn btn-secondary" data-bs-container="body" data-bs- toggle="popover" data-bs-placement="top" data-bs-content="Home Page">Privacy Policy</button> </li> </ul>

archivo JS:

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