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...