0
162
ViewsLa información sobre herramientas de Bootstrap no se activa en la insignia
Tengo una aplicación de Laravel para la que intento activar una información sobre herramientas de Bootstrap en una insignia, pero recibo el siguiente error en la consola:
Uncaught ReferenceError: Tooltip is not defined Estoy importando componentes de Popper y JavaScript en resources/js/bootstrap.js según la documentación de Bootstrap 5:
import Modal from "bootstrap/js/dist/modal.js"; import Collapse from "bootstrap/js/dist/collapse.js"; import Tooltip from "bootstrap/js/dist/tooltip.js"; import Popper from "@popperjs/core/dist/umd/popper"; try { window.Popper = Popper; /* window.Popper = require("@popperjs/core"); # This doesn't work either */ window.$ = window.jQuery = require("jquery"); require("bootstrap"); } catch (e) {} Estoy inicializando la información sobre herramientas usando el siguiente código de la documentación en resources/js/main.js con un detector de eventos DOMContentLoaded a su alrededor:
document.addEventListener("DOMContentLoaded", function () { var tooltipTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="tooltip"]') ); var tooltipList = tooltipTriggerList.map(función (tooltipTriggerEl) { devuelve una nueva información sobre herramientas (tooltipTriggerEl); }); });
He ejecutado npm run dev y tengo lo siguiente en webpack.mix.js :
mix.js('resources/js/app.js', 'public/js') .sass('resources/sass/app.scss', 'public/css') .postCss('resources/css/app.css', 'public/css') .sourceMaps();Y finalmente hago referencia a ambos archivos y agrego el HTML en mi marcado:
<head> <script src="{{ asset('js/app.js') }}" defer></script> <script src="{{ asset('js/main.js') }}" defer></script> </head> <body> ... <div class="text-center mt-3 mb-3 mb-lg-0"> <span class="badge" data-bs-toggle="tooltip" data-bs-placement="bottom" title="My tooltip"><i class="fas fa-lock"></i> SECURE PAYMENT</span> </div> </body>Así que probé casi todo lo que se me ocurrió por ahora y estoy perdido. ¿Qué me estoy perdiendo?
2 answers
Answer question0
Finalmente logré resolver este problema después de volver a él y dedicarle unas horas más. Hubo algunos problemas en juego que causaron que la información sobre herramientas de Bootstrap no se procesara, y ahora que los resolví, la información sobre herramientas se muestra como se esperaba.
1. Agregar un atributo de title
Como menciona la documentación de Bootstrap 5 y como señaló Gleb, la información sobre herramientas de Bootstrap requiere algunos datos en el atributo de title HTML como mínimo. El navegador utiliza este atributo de título para representar una información sobre herramientas predeterminada, que Bootstrap luego engancha para generar una información sobre herramientas más atractiva; por lo tanto, sin esto, Bootstrap no puede generar ninguna información sobre herramientas.
2. Modificación de las importaciones y requisitos de Bootstrap
Para corregir Uncaught ReferenceError: Tooltip is not defined , pegue el JavaScript de inicialización de la documentación de información sobre herramientas sin cambios:
var tooltipTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="tooltip"]') ); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl); }); Luego, en el archivo desde el que está importando sus componentes de Bootstrap Javascript, como app.js o, en mi caso, bootstrap.js , cambie esta línea dentro del bloque de try :
require("bootstrap")a lo siguiente:
window.bootstrap = require("bootstrap"); Esto debería resultar en un app.js / bootstrap.js similar al siguiente:
window._ = require("lodash"); import Popper from "@popperjs/core/dist/umd/popper"; /* Replace these with the individual JavaScript components you need or, if optimising size is not a priority for you, simply replace them all with import "bootstrap"; */ import "bootstrap/js/dist/button.js"; /* need or, import "bootstrap/js/dist/carousel.js"; import "bootstrap/js/dist/collapse.js"; import Modal from "bootstrap/js/dist/modal.js"; import Tooltip from "bootstrap/js/dist/tooltip.js"; try { window.Popper = Popper; window.$ = window.jQuery = require("jquery"); window.bootstrap = require("bootstrap"); // Modify this line } catch (e) {} Finalmente, ejecute npm run dev en su proceso de compilación: el error ahora debería borrarse y la información sobre herramientas de Bootstrap debería mostrarse como se esperaba.
0
También debe agregar un atributo de title con texto para la información sobre herramientas.
https://getbootstrap.com/docs/5.1/components/tooltips/#markup
El marcado requerido para una información sobre herramientas es solo un atributo de datos y un título en el elemento HTML que desea tener una información sobre herramientas.
<div class="text-center mt-3 mb-3 mb-lg-0"> <span title="Some tooltip text!" class="badge bg-secondary" data-bs-toggle="tooltip" data-bs-placement="bottom"><i class="fas fa-lock"></i> SECURE PAYMENT</span> </div> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/css/bootstrap.min.css"> <script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap/5.1.3/js/bootstrap.min.js"></script>