Bootstrap 5 Popovers Dismiss on next click

The popover is an attribute of bootstrap used to make the website look more effective. Popovers are mainly used to display additional information and are displayed with the click of the mouse pointer on a button. 

Popovers can be dismissed on the user’s next click of a different element than the toggle element by setting the trigger attribute to focus.

Popovers Dismiss on next click used attribute:

• data-bs-trigger: This attribute tells how the popover will be triggered. Accepted values are click, hover, focus, and manual.

Syntax:

<button 
 tabindex="0" 
 class="btn" 
 role="button"
 data-bs-toggle="popover" 
 title="..."
 data-bs-trigger="focus" 
 data-bs-content="...">
</button>

Example 1: In this example, we set the data -bs-trigger attribute of the popover to focus, show the popover will hide when it loses focus.

Output:

👁 Image

Example 2: In this example, we show the Bootstrap 5 Popovers Dismiss on the next click with left and right directions variations of the popover.

Output:

👁 Image

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#dismiss-on-next-click