Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.

Example

Enable popovers

You must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their data-bs-toggle attribute, like so:

HTML
<button type="button" class="btn btn-lg btn-danger" data-bs-toggle="popover" title="Popover title" data-bs-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>

Four directions

Four options are available: top, right, bottom, left. Directions are mirrored when using Bootstrap in RTL. Set to data-bs-placement="" to change the direction.

HTML
<button type="button" class="btn btn-secondary" data-bs-container="body" data-bs-toggle="popover" data-bs-placement="top" data-bs-content="Top popover">    Popover on top</button>

Custom popovers

We set a custom class with data-bs-custom-class="custom-popover" to scope our custom appearance

HTML
<button type="button" class="btn btn-secondary"    data-bs-toggle="popover" data-bs-placement="right"    data-bs-custom-class="custom-popover"    title="Custom popover"    data-bs-content="This popover is themed via CSS variables.">    Custom popover</button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the user’s next click of a different element than the toggle element.

HTML
<a tabindex="0" class="btn btn-lg btn-danger" role="button" data-bs-toggle="popover" data-bs-trigger="focus" title="Dismissible popover" data-bs-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</a>

Disabled elements

Elements with the disabled attribute aren’t interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you’ll want to trigger the popover from a wrapper div or span, ideally made keyboard-focusable using tabindex="0".

For disabled popover triggers, you may also prefer data-bs-trigger="hover focus" so that the popover appears as immediate visual feedback to your users as they may not expect to click on a disabled element.

HTML
<span class="d-inline-block" tabindex="0" data-bs-toggle="popover" data-bs-trigger="hover focus" data-bs-content="Disabled popover">    <button class="btn btn-primary" type="button" disabled>Disabled button</button></span>
Recent Notification