Skip to content
Advertisement

How to initialize Tooltips in Bootstrap 4 with pure JavaScript? No jQuery

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.

Advertisement