Bootstrap 5 Enable Tooltips Everywhere
Last Updated :
13 Jan, 2023
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 =
rel = "stylesheet" />
< script src =
</ script >
< script src =
</ script >
</ head >
< body >
< div class = "container text-center" >
< div class = "my-4" >
< h3 class = "text-success" >
GeeksforGeeks
</ 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 GeeksforGeeks" >
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 =
</ script >
< script src =
</ script >
< link href =
rel = "stylesheet" />
</ head >
< body >
< div class = "container text-center" >
< div class = "my-4" >
< h3 class = "text-success" >
GeeksforGeeks
</ 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
Share your thoughts in the comments
Please Login to comment...