I have a Laravel app for which I'm trying to trigger a Bootstrap tooltip on a badge, but am getting the following error in the console:
Uncaught ReferenceError: Tooltip is not defined
I'm importing Popper and JavaScript components in resources/js/bootstrap.js as per the Bootstrap 5 documentation:
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) {}
I'm initialising the tooltips using the following code from the documentation in resources/js/main.js with a DOMContentLoaded event listener around it:
document.addEventListener("DOMContentLoaded", function () { var tooltipTriggerList = [].slice.call( document.querySelectorAll('[data-bs-toggle="tooltip"]') ); var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new Tooltip(tooltipTriggerEl); }); });
I've run npm run dev and have the following in 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();
And finally I reference both files and add the HTML in my markup:
<head>
<script src="" defer></script>
<script src="" 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>
So I've tried pretty much everything I can think of for now and am at a loss. What am I missing?
from Recent Questions - Stack Overflow https://ift.tt/3fYZiAJ
https://ift.tt/eA8V8J
No comments:
Post a Comment