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 JS Popover

JS Popover

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.

For a tutorial about popovers, visit our Bootstrap 4 Popovers Tutorial.


Usage Via data-* Attributes

The data-toggle="popover" activates the popover.

The title attribute specifies the header text of the popover.

The data-content attribute specifies the text that should be displayed inside the popover's body.

Run code

Note: Popovers must be initialized with jQuery.


Usage Via JavaScript

Enable popovers via JavaScript:

Run code

Popover Options

Options can be passed via data attributes or JavaScript.

For data attributes, append the option name to data-, as in data-animation="".

Name Type Default Description Example
animation boolean true

Specifies whether to add a CSS fade transition effect when opening and closing the popover

  • true - Add a fading effect
  • false - Do not add a fading effect
Demo
container string, or the boolean false false Appends the popover to a specific element.
Example: container: 'body'
content string "" Specifies the text inside the popover's body
delay number, or object 0 Specifies the number of milliseconds it will take to open and close the popover.

To specify a delay for opening and another one for closing, use the object structure:

delay: {show: 500, hide: 100} - which will take 500 ms to open the popover, but only 100 ms to close it
Demo
html boolean  false Specifies whether to accept HTML tags in the popover:
 
  • true - Accept HTML tags
  • false - Do not accept HTML tags
Demo
placement string "right" Specifies the popover position. Possible values:

  • "top" - Popover on top
  • "bottom" - Popover on bottom
  • "left" - Popover on left
  • "right" - Popover on right
  • "auto" - Lets the browser decide the position of the popover. For example, if the value is "auto left", the popover will display on the left side when possible, otherwise on the right. If the value is "auto bottom", the popover will display at the bottom when possible, otherwise on the top
Demo
selector string, or the boolean false false Adds the popover to a specified selector
template string   Base HTML to use when creating the popover.

The popover's title will be injected into the .popover-header.

The popover's content will be injected into the .popover-body.

.arrow will become the popover's arrow.

The outermost wrapper element should have the .popover class.
title string "" Specifies the header text of the popover
trigger string "click" Specifies how the popover is triggered. Possible values:

  • "click" - Trigger the popover with a click
  • "hover" - Trigger the popover on hover
  • "focus" - Trigger the popover when it gets focus (by tabbing or clicking .e.g)
  • "manual" - Trigger the popover manually
Tip: To pass multiple values, separate them with a space
Demo
offset number or a string 0 Offset of the popover relative to its target Demo
fallbackPlacement string or an aray "flip" Specifies which position Popper wil use on fallback
boundary string or element "scrollParent" Overflow constraint boundary of the popover. Accepts the values "viewport", "window" or "scrollParent", or an HTML element

Popover Methods

The following table lists all available popover methods:

Method Description
$().popover(options) Activates the popover with an option. See options above for valid values
$().popover("show") Shows the popover
$().popover("hide") Hides the popover
$().popover("toggle") Toggles the popover
$().popover("dispose") Hides and destroys the popover
$().popover("enable") Enables the popover the ability to be shown. This is default
$().popover("disable") Removes the ability to show a popover. The popover can only be shown if it is re-enabled again
$().popover("toggleEnabled") Toggles the ability for the popover to be shown or hidden
$().popover("update") Updates the position of the popover

Popover Events

The following table lists all available popover events:

Event Description Example
show.bs.popover This event fires immediately when the show instance method is called. Demo
shown.bs.popover This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete). Demo
hide.bs.popover This event is fired immediately when the hide instance method has been called. Demo
hidden.bs.popover This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). Demo
inserted.bs.popover This event is fired after the show.bs.popover event when the popover template has been added to the DOM.