Popovers

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

Page Demo Bootstrap Doc

Enabling Popovers

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-light" 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>

Requirements:

  • /scss/inc/bootstrap-overrides/_popover.scss