Tooltips in Bootstrap (which uses Popper.js)

Came across an interesting problem today.

I am using Bootstrap 5 Lite theme in the new site. On the old site, I was using the jQuery Tooltip plugin for when I moused over a notes section in a table. The problem is, even though I imported the jQuery plugin, it was being overridden by Popper.js which is what Bootstrap uses for it's tooltip plugin. The problem is that popper.js is called in js with an identical call in jQuery to tooltip(). Sooo, I had to remove the jQuery tooltip plugin and reconfigure the call to tooltip() the popper.js way. But with the Boostrap 5 Lite theme, it doesn't load all of Bootstrap, it does the Bootstrap min I think. So, when I would call the tooltip() function, it was missing and throw an error in the console. Sooo, to fix that, I had to import the Booststrap bundle which is everything, see here:

// Bootstrap Bundle with Popper
backdrop_add_js('//cdn.jsdelivr.net/npm/bootstrap@5.1.1/dist/js/bootstrap.bundle.min.js', 'external');

Once I figured that out, I needed to style the dang thing but easier said than done. Usually you can inspect an item on the page but you can't inspect a tooltip unless you setup an Event Listener Breakpoint by checking Mouse->mouseover(in Firefox) which let me then be able to inspect the tooltip html that was injected into the document. Finally got er done! Slayed that dragon! haha