javascriptlaraveltwitter-bootstrapbuildtwitter-bootstrap-tooltip

Bootstrap tooltip not triggering on badge

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?

Solution

  • 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 title attribute

    As Bootstrap 5's documentation mentions and as Gleb pointed out, Bootstrap Tooltips require some data in the HTML title attribute 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:

    var tooltipTriggerList = [].slice.call(
    document.querySelectorAll('[data-bs-toggle="tooltip"]')
);
var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) {
    return new bootstrap.Tooltip(tooltipTriggerEl);
});

    Then in the file you're importing your Bootstrap Javascript components from, such as app.js or in my case bootstrap.js, change this line inside of the try block:

    require("bootstrap")

    to the following:

    window.bootstrap = require("bootstrap");

    This should result in an app.js/bootstrap.js that looks something like the following:

    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) {}

    Finally, run npm run dev in your build process - the error should now be cleared and your Bootstrap tooltips should be rendering as expected.

    working Bootstrap tooltip example