Popovers
Add small overlay content, like those found in iOS, to any element for housing secondary information.
Enable popovers everywhere
One way to initialize all popovers on a page would be to select them by their data-toggle attribute:
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 |