Popovers

Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site. Read the Official Bootstrap Documentation for a full list of instructions and other options.

Enable popovers everywhere

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

Basic example

Popovers rely on the 3rd party library Popper.js for positioning. You must include popper.min.js before bootstrap.js or use bootstrap.bundle.min.js / bootstrap.bundle.js which contains Popper.js in order for popovers to work!

Four directions

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

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.