Bootstrap 5 Popovers Events

Bootstrap 5 Popovers Events start off when the different popover instances are initiated. 

Bootstrap 5 Popovers Events

• show.bs.popover: As soon as the display instance method is called, this event occurs.
• shown.bs.popover: When the popover is made visible to the user, this event is dispatched. It will not be fired until the CSS transition has been successfully accomplished.
• hide.bs.popover: After calling the hide instance method, this event is instantly triggered.
• hidden.bs.popover: After the popover has finished being hidden from the user, this event is fired. It will not be fired until the CSS transition has been successfully accomplished.
• inserted.bs.popover: This event is triggered after the show.bs.popover event when the popover template has been added to the DOM.

Syntax:

var popoverElement = document.getElementById("popoverID");
popoverElement.addEventListener("show.bs.popover", function(){
 ...
});

Example 1: The code example below demonstrates how to use the show.bs.popover and hide.bs.popover events with the show() and hide() methods in popover using JavaScript. When the events are fired a message is prompted in the console (Press Ctrl+Shift+J (Windows / Linux) or Cmd+Opt+J (Mac) to open the browser console panel). The popover is placed on the right.

Output:

Example 2: The code example below demonstrates how to use the hidden.bs.popover event with the hide() method in popovers using JavaScript and an alert is shown when the event is fired. The popovers are placed at the top and left.

Output:

Reference:https://getbootstrap.com/docs/5.0/components/popovers/#events