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

Question

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.

Candlemas

$('[data-toggle="tooltip"]').tooltip(), the tooltip is a jquery method. Also, I'm curious to know, why do you want to avoid jquery, although bootstrap itself uses jquery. – Teenybopper

Hi @RaviNain because as I expressed before, it's the only section that I need jQuery. The rest of my project runs on full JS. – Candlemas

Are you okay to show tooltip using other method instead of bootstrap? If yes, checkout this answer: #13518651 – Teenybopper

Answer 1

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.

Candlemas

Answer 2

Thought I'd throw an answer out there using JS that also targets Bootstrap 4.x. The below code snippet will initialize all tooltips on the page in Bootstrap 4.x.

If you're unfamiliar with JavaScript classes and constructors then you may have trouble catching why the initialization didn't work in the original question.

Classes & Constructors: https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Classes/constructor

Bootstrap 4.x —requires— JQuery (v3.2.1 slim at minimum) and the Tooltips component specifically require another library, Popper.js (v1.12.3 at minimum). However, the initialization can be written with simple JS (to call the JQuery based constructor for tooltips).

Note: the keyword new is missing from the OP's original question, this is needed to instantiate a new class instance for each element.

function setTooltips() {
  let tooltips = document.querySelectorAll('[data-toggle="tooltip"]');
            
  for(let i = 0; i < tooltips.length; i++) {
    let tooltip = new bootstrap.Tooltip(tooltips[i]);
  } 
}

You could also use the mapping method shown by BS5 as it would still be calling the JQuery based constructor. As long as JQuery and Popper are present beforehand.

Also you don't necessarily need to save the instance into memory if you don't need to reference it later, just return it instead.

Preferably call this in a DOMContentLoaded event globally to target any tooltips on any page.

window.addEventListener('DOMContentLoaded', function() {
  setTooltips();
}, false);

Bootstrap 5 does things differently, mainly dropping JQuery as a dependency in favor of more modern ES6 JS. Use Federico's answer for Bootstrap 5.x and up, which is the default example from the BS5 docs for initializing tooltips.

Bootstrap 5 is designed to be used without JQuery, but it's still possible to use our components with JQuery. If Bootstrap detects jQuery in the window object it will add all of our components in jQuery’s plugin system...

See: https://getbootstrap.com/docs/5.0/getting-started/javascript/#still-want-to-use-jquery-its-possible

Linoel