Bootstrap 5 Enable Tooltips Everywhere

Bootstrap 5 Tooltips can be enabled everywhere by first creating a list of all the tooltips and then enabling each of them. All the tooltips have an attribute named "data-bs-toggle" set to "tooltip". This attribute can be used to select all the tooltips using the document.querySelectorAll() method.

Bootstrap 5 Enable Tooltips Everywhere Classes: There are no specific classes for enabling tooltips everywhere in Bootstrap 5. Here we will select all the tooltip elements using the data-bs-toggle attribute and then create an instance of the tooltip for each of them.

Syntax:

let tooltipelements = document.querySelectorAll("[data-bs-toggle='tooltip']");
tooltipelements.forEach((el) => {
 new bootstrap.Tooltip(el);
});

Example 1: In this example, we have only one tooltip and we will enable it by selecting it directly using the id attribute.

Output:

Example 2: In this example, we enabled all three tooltips in one go using the syntax provided above.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere