Bootstrap 4 Tutorial
BS4 Introduction BS4 Getting Started BS4 Containers BS4 Typography BS4 Grid Basics BS4 Tables BS4 Images BS4 Jumbotron BS4 Buttons BS4 Button Groups BS4 Spinners BS4 Alerts BS4 Dropdowns BS4 Collapse BS4 Navs BS4 Navbars BS4 Pagination BS4 Breadcrumbs BS4 Badges BS4 Progress Bars BS4 List Groups BS4 Cards BS4 Forms BS4 Inputs BS4 Input Groups BS4 Custom Forms BS4 Carousel BS4 Modal BS4 Tooltips BS4 Popovers BS4 Toast BS4 Scrollspy BS4 Media Objects BS4 Filters BS4 Utilities Bootstrap 3 vs. Bootstrap 4
Bootstrap 4 Grid
BS4 Grid System BS4 Grid XSmall BS4 Grid Small BS4 Grid Medium BS4 Grid Large BS4 Grid XLarge
Bootstrap 4 Reference
JS Alert JS Carousel JS Collapse JS Dropdown JS Modal JS Popover JS Tab JS Toasts JS Tooltip

Bootstrap 4 Popovers

Popovers are generally used to show additional information and are displayed when the user clicks on an element.

Popovers is similar to tooltips, the difference is that the popover can contain much more content.

Click to toggle popover

How to Create a Popover

The data-toggle="popover" attribute is used to create a popover.

Use the title attribute to specify the header title of the popover.

And use the data-content attribute to specify the text that should be displayed inside the popover's body.

Note: Popovers must be initialized with jQuery.

One way to initialize all popovers on a page would be to select them by their data-toggle attribute and call the popover() method.

The following code will enable all popovers in the document:

Run code

Positioning Popovers

Use the data-placement attribute to set the position of the popovers on top, right, bottom, or the left side of the element.

Click the buttons below to see popover directions: top, right, bottom, and left:

Run code

The placement attributes do not work as you expect if it is not enough room for them. For example: if you use the top placement at the top of a page (where it is no room for it), it will instead display the popover below the element or to the right (wherever it is room for it).



Closing Popovers

By default, the popover is closed when you click on the toggle element again.

Use the data-trigger="focus" to dismiss popovers on the user's next click of a different element than the toggle element.

Run code

Use the data-trigger="hover", if you want the popover to be displayed when you move the mouse pointer over the element.

Run code

Disabled Elements

Elements with the disabled attribute aren't interactive, meaning users cannot focus, hover or click them to trigger a popover.

To solve this problem, wrap your element in a <div> or <span>, made keyboard-focusable using tabindex attribute, and override the pointer-events property on the disabled element.

Run code

Popover with HTML Elements

The following example shows how to add HTML in popovers:

Run code

Complete Bootstrap 4 Popover Reference

For a complete reference of all popover options, methods and events, visit our Bootstrap 4 JS Popover Reference.