He revisado bastantes publicaciones aquí relacionadas con este problema, pero ninguna de ellas parece resolver mi problema.
He importado los archivos jQuery y Bootstrap js en el orden correcto. Cosas como los paneles de arranque funcionan perfectamente bien para mí.
Mis importaciones de secuencias de comandos son así:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> <script src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script> <link href="//maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css" rel="stylesheet">Sin embargo, cuando intento
$('[data-toggle="popover"]').popover();Recibo el siguiente mensaje en la consola de Chrome:
Uncaught TypeError: $(...).popover is not a functionAl principio pensé que tal vez el popover no estaba incluido en la copia de CDN, así que seguí adelante y descargué una copia local con todos los complementos incluidos desde aquí:
http://getbootstrap.com/customize/y obtuve el mismo mensaje de error (volvió a señalar las etiquetas del script hacia el archivo js local).
Haciendo una búsqueda de "popover" en el archivo bootstrap.min.js:
http://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.jsMuestra que popover está incluido en el archivo.
Dado que ha declarado que ha incluido jQuery y las otras bibliotecas correctamente, un caso posible es que podría haber varias instancias de jQuery en la página.
Entonces, según la tecnología del servidor utilizada, busque una versión duplicada de jQuery y, si hay alguna, elimínela (si no es necesario, tendrá que pensar en el uso de noConflict() ).
En el caso de instancias de jQuery duplicadas, el problema es que la versión de jQuery a la que está conectado el complemento puede ser diferente a la que está accediendo para usar el complemento en ese momento, no se encontrará el complemento.
El orden de inclusión de bootstrap.js y jquery.js es importante. Incluya jquery.js ANTES de bootstrap.js
Para Bootstrap 5 en adelante, así es como agrega el código de popovers para el botón:
<button type="button" class="btn btn-secondary mx-2" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?"> Your Cart(<span id="cart">0</span>) </button>Texto:
<script type="text/javascript"> var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]')); var popoverList = popoverTriggerList.map(function (popoverTriggerEl) { return new bootstrap.Popover(popoverTriggerEl); }); </script>