Dismissible & Interactive Popovers

• data-bs-trigger=”focus” → Popover disappears when clicking outside
• data-bs-html=”true” → Allows HTML inside popovers
• data-bs-container=”body” → Ensures popover stays within viewport

Example: Dismissible Popover

<button type="button" class="btn btn-info" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible Popover" data-bs-content="Click outside to dismiss me!">
  Focus Popover
</button>

Explanation:

This popover disappears automatically when you click outside of it.

Example: Popover with HTML Content

<button type="button" class="btn btn-dark" data-bs-toggle="popover" data-bs-html="true" title="<strong>Popover Header</strong>" data-bs-content="This is a <em>popover</em> with <b>HTML</b>.">
  HTML Popover
</button>

Explanation:

data-bs-html=”true” allows bold, italic, and links inside popovers.