Bootstrap 5 Popovers Disabled Elements

Bootstrap 5 Popovers are an amazing way to show some quick information when hovered over a button or anchor or span tag. In popovers, there exists an option to disable the popover element. Disabling the element essentially means that the popover won't work anymore. The disabling is mainly done using the disabled attribute addition and it works on either popover made with buttons or span tags and not with anchor tags. 

Bootstrap 5 Popovers Disabled elements attributes:

• disabled: This attribute is added to the popover and this disables the popover from operating.
• data-bs-trigger: This attribute is used for disabled popover triggers, in order to popover appear as immediate visual feedback to the user.

Syntax:

<span data-bs-toggle="popover" 
 data-bs-trigger="hover focus" 
 data-bs-content="...">
 <button class="btn" 
 type="button" disabled>
 ...
 </button>
</span>

Example 1: The code demonstrates how the popovers with span tags and popovers with buttons behave differently when disabled.

Output:

Example 2: The code demonstrates how the disabled popovers can give out floating information about the popovers in different directions.

Output:

Reference: https://getbootstrap.com/docs/5.0/components/popovers/#disabled-elements