Popovers

Add small overlay content, like those found in iOS, to any element for housing secondary information.

Page Demo Bootstrap Doc

Enable popovers everywhere

One way to initialize all popovers on a page would be to select them by their data-toggle attribute:

<button type="button" class="btn btn-theme" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
if($('[data-toggle="popover"]')[0]) {
    $('[data-toggle="popover"]').popover();
}

All four directions

Four positioning options are available: top, right, bottom, and left aligned.

<!-- Top -->
<button type="button" class="btn btn-light" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on top
</button>

<!-- Right -->
<button type="button" class="btn btn-light" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on right
</button>

<!-- Bottom -->
<button type="button" class="btn btn-light" data-toggle="popover" data-placement="bottom" data-content="Vivamus
sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on bottom
</button>

<!-- Left -->
<button type="button" class="btn btn-light" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
    Popover on left
</button>

Hoverable

Use focus: hover to make Popovers hoverable.

<button class="btn btn-light" data-toggle="popover" data-trigger="hover" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>

Dismiss on next click

Use the focus trigger to dismiss popovers on the next click that the user makes.

<button tabindex="0" class="btn btn-light" data-toggle="popover" data-trigger="focus" title="Dismissible popover" data-content="And here's some amazing content. It's very engaging. Right?">Dismissible popover</button>
Files required:
Type Files
Custom SCSS /src/scss/inc/bootstrap-overrides/_popovers.scss
Javascript /src/js/vendors/bootstrap.js