I’m somehow stuck with this code:
$(function () { $('[data-toggle="tooltip"]').tooltip() });
I’d like to change it to pure JavaScript. I’m not sure how to call the tooltip function, I already have some ideas like:
var tooltips = document.querySelectorAll("[data-toggle='tooltip']"); for(var i = 0; i < tooltips.length; i++){ //this gives an error tooltips[i].tooltip(); }
I’m able to get all the tooltips, but I cannot initialize them. If I write something like this:
$(tooltips[i]).tooltip();
Then it works, but I want to remove the jQuery dependency since this is the only jQuery section that I have. Any idea? I’ve been searching and I cannot find anything useful.
Advertisement
Answer
For the new Bootstrap 5, this will be the new option without jQuery:
var tooltipTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="tooltip"]')) var tooltipList = tooltipTriggerList.map(function (tooltipTriggerEl) { return new bootstrap.Tooltip(tooltipTriggerEl) })
More info: https://getbootstrap.com/docs/5.0/components/tooltips/
Note:
In Bootstrap 4, you cannot initialize the Tooltips without jQuery. Here is an example: https://jsfiddle.net/30c6kmnL/
There is a dependency on the function/class Tooltip
that cannot be called (from my knowledge) without jQuery (you might need to rewrite the entire Tooltip function/class). I got errors like this one:
Uncaught TypeError: bootstrap.Tooltip is not a constructor
If you know how to fix it, please do it on the Snippet and share your results.