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.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >GFG - Bootstrap 5 Enable Tooltips Everywhere</ title > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > </ head > < body > < div class = "container text-center" > < div class = "my-4" > < h3 class = "text-success" > w3wiki </ h3 > < h4 > Bootstrap 5 Enable Tooltips Everywhere </ h4 > </ div > < button class = "btn btn-warning mb-5" onclick = "enableTooltip()" > Enable The tooltip </ button > < br > < button id = "tt" class = "btn btn-secondary" data-bs-toggle = "tooltip" data-bs-title = "Welcome to w3wiki" > Hover for Tooltip </ button > < script > function enableTooltip() { let element = document.getElementById("tt"); new bootstrap.Tooltip(element); } </ script > </ div > </ body > </ html > |
Output:
Example 2: In this example, we enabled all three tooltips in one go using the syntax provided above.
HTML
<!DOCTYPE html> < html lang = "en" > < head > < meta charset = "UTF-8" > < meta http-equiv = "X-UA-Compatible" content = "IE=edge" > < meta name = "viewport" content = "width=device-width, initial-scale=1.0" > < title >GFG - Bootstrap 5</ title > < script src = "https://cdn.jsdelivr.net/npm/@popperjs/core@2.11.6/dist/umd/popper.min.js" > </ script > < script src = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/js/bootstrap.min.js" > </ script > < link href = "https://cdn.jsdelivr.net/npm/bootstrap@5.2.2/dist/css/bootstrap.min.css" rel = "stylesheet" /> </ head > < body > < div class = "container text-center" > < div class = "my-4" > < h3 class = "text-success" > w3wiki </ h3 > < h4 > Bootstrap 5 Enable Tooltips Everywhere </ h4 > </ div > < button class = "btn btn-warning mb-5" onclick = "enableAllTooltips()" > Enable All Tooltips </ button > < br > < a class = "btn d-inline-block mb-4" data-bs-toggle = "tooltip" data-bs-title = "Tooltip 1" > Tooltip 1 </ a > < a class = "btn d-inline-block mb-4" data-bs-toggle = "tooltip" data-bs-title = "Tooltip 2" > Tooltip 2 </ a > < a class = "btn d-inline-block mb-4" data-bs-toggle = "tooltip" data-bs-title = "Tooltip 3" > Tooltip 3 </ a > < script > function enableAllTooltips() { let tooltipelements = document.querySelectorAll("[data-bs-toggle='tooltip']"); tooltipelements.forEach((el) => { new bootstrap.Tooltip(el); }); } </ script > </ div > </ body > </ html > |
Output:
Reference: https://getbootstrap.com/docs/5.0/components/tooltips/#example-enable-tooltips-everywhere
Contact Us