Popovers
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Page Demo Bootstrap DocEnabling 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