Bootstrap 5 Tooltip is used to show additional information about an element when it is hovered by the user or comes into focus. There are five events that can be triggered by the tooltip in its lifecycle. These events are listed below.
Bootstrap 5 Tooltips Events:
- hide.bs.tooltip: This tooltip event is triggered after the hide() method of the tooltip is called.
- hidden.bs.tooltip: This event is triggered after the tooltip is hidden from the screen.
- inserted.bs.tooltip: This event is fired after the “show.bs.tooltip” when the tooltip has been inserted in DOM.
- show.bs.tooltip: This tooltip event is triggered after the show() method of the tooltip is called.
- shown.bs.tooltip: This event is triggered after the tooltip is shown to the user.
Syntax:
tooltip.addEventListener('tooltip-event', () => {
....
})Example 1: In this example, we used the show.bs.tooltip event of the tooltip to show a toast message when this event is fired.
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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap5 Tooltip Events</strong>
</div>
<div class="toast-container p-2 top-0
start-50 translate-middle-x">
<div id="myToast" class="toast" data-bs-delay="1500">
<div class="toast-header">
<strong class="me-auto">
Tooltip Shown
</strong>
</div>
<div class="toast-body">
<span id="msg">
show.bs.tooltip Event Fired
</span>
</div>
</div>
</div>
<button id="tt" class="btn btn-primary
mt-5 mb-3" data-bs-toggle="tooltip" data-bs-title="GeeksforGeeks">
Hover For Tooltip
</button>
</div>
<script>
// Enabling all the tooltips on the page.
const tooltipElements =
document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltips =
[...tooltipElements].map(el => new bootstrap.Tooltip(el));
const toast =
new bootstrap.Toast(document.getElementById("myToast"));
document.getElementById("tt").addEventListener('show.bs.tooltip', () => {
toast.show();
});
</script>
</body>
</html>
|
Output:
Example 2: This example illustrates the use of the hidden.bs.tooltip event to show a toast message when the tooltip is completely hidden from the user.
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">
<!-- Bootstrap CSS -->
<link rel="stylesheet" href=
<!-- Bootstrap Javascript -->
<script src=
</script>
<script src=
</script>
</head>
<body>
<div class="container">
<div class="mt-5">
<h1 class="text-success">GeeksforGeeks</h1>
<strong>Bootstrap5 Tooltip Events</strong>
</div>
<div class="toast-container p-2 top-0
start-50 translate-middle-x">
<div id="myToast" class="toast" role="alert"
data-bs-delay="1500">
<div class="toast-header bg-danger text-white">
<strong class="me-auto">
Tooltip Hidden
</strong>
</div>
<div class="toast-body bg-danger
text-white">
<span id="msg">
hidden.bs.tooltip Event Triggered
</span>
</div>
</div>
</div>
<button id="tt" class="btn btn-danger mt-5 mb-3" data-bs-toggle="tooltip" data-bs-title="GeeksforGeeks">
Hover For Tooltip
</button>
</div>
<script>
// Enabling all the tooltips on the page.
const tooltipElements =
document.querySelectorAll('[data-bs-toggle="tooltip"]');
const tooltips =
[...tooltipElements].map(el => new bootstrap.Tooltip(el));
const toast =
new bootstrap.Toast(document.getElementById("myToast"));
document.getElementById("tt").addEventListener('hidden.bs.tooltip', () => {
toast.show();
});
</script>
</body>
</html>
|
Output:
Reference: https://getbootstrap.com/docs/5.2/components/tooltips/#events