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="{{ 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>
So I've tried pretty much everything I can think of for now and am at a loss. What am I missing?
I finally managed to solve this issue after coming back to it and spending a few more hours on it. There were a few issues at play causing my Bootstrap tooltips not to be rendered, and now that I've solved them the tooltips render as expected.
1. Adding a
titleattributeAs Bootstrap 5's documentation mentions and as Gleb pointed out, Bootstrap Tooltips require some data in the HTML
titleattribute as a bare minimum. This title attribute is used by the browser to render a default tooltip, which Bootstrap then hooks into to render a better-looking tooltip - so without this, Bootstrap isn't able to render any tooltip at all.2. Modifying Bootstrap imports and requires
To fix
Uncaught ReferenceError: Tooltip is not defined, paste in the initialisation JavaScript from the Tooltips documentation unchanged:Then in the file you're importing your Bootstrap Javascript components from, such as
app.jsor in my casebootstrap.js, change this line inside of thetryblock:to the following:
This should result in an
app.js/bootstrap.jsthat looks something like the following:Finally, run
npm run devin your build process - the error should now be cleared and your Bootstrap tooltips should be rendering as expected.