Bootstrap 5 Tooltips Events

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.

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.

Output:

Reference:https://getbootstrap.com/docs/5.2/components/tooltips/#events