Bootstrap tooltip not triggering on badge

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