bootstrap_ref_js_popover

Bootstrap 5 JS Popover

JS Popover (popover.js)

The Popover plugin is similar to tooltips but can contain much more content, including a header and body. It appears when the user interacts (e.g., clicks) an element.

Plugin dependency: Popovers require Popper.js for positioning. Bootstrap’s bootstrap.bundle.min.js includes Popper, so if you’re using that, you’re covered. If you’re including scripts individually, ensure Popper is loaded before popover.js.

For a general introduction to Popovers, refer to the official Bootstrap Popover Documentation.

Via data-bs-* Attributes

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

The title attribute (or data-bs-title) specifies the header text of the popover.

The data-bs-content attribute specifies the text or HTML that should be displayed inside the popover’s body.

<button type="button" class="btn btn-lg btn-danger"
  data-bs-toggle="popover"
  title="Popover Header"
  data-bs-content="And here's some amazing content. It's very engaging. Right?">
  Click to toggle popover
</button>

<!-- Important: Popovers must be initialized via JavaScript for them to work. -->
<script>
  var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
  var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
    return new bootstrap.Popover(popoverTriggerEl)
  })
</script>

<!-- Practical Application: Use for displaying extended information, user profile summaries, or contextual help. -->

Via JavaScript

Popovers must be initialized with JavaScript. Select the element(s) and call the Popover constructor.

// Initialize all popovers on a page
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
  return new bootstrap.Popover(popoverTriggerEl)
});

// Initialize a single popover with custom options
var exampleEl = document.getElementById('myPopoverElement');
var popover = new bootstrap.Popover(exampleEl, {
  content: 'This is the popover content via JavaScript.',
  placement: 'top'
});

// Common Obstacle: Forgetting to initialize popovers. They won't work with just data attributes.

Popover Options

Options can be passed via data-bs-* attributes or JavaScript. For data attributes, append the option name to data-bs-, e.g., data-bs-placement="top".

Name	Type	Default	Description (Bootstrap 5)	Data Attribute Example (where applicable)
animation	boolean	true	Apply a CSS fade transition to the popover.
container	string | element | false	false	Appends the popover to a specific element. Example: container: 'body' or data-bs-container="body". This is useful for avoiding rendering issues in complex components.
content	string | element | function	''	Default content value if data-bs-content attribute isn’t present. Can also be a function that returns content.
delay	number | object	0	Delay showing and hiding the popover (ms). Object structure: delay: { "show": 500, "hide": 100 }.
html	boolean	false	Allow HTML in the popover. If false, jQuery’s text() method will be used (Bootstrap 5 uses textContent internally if DOMParser is not available/safe). Set to true if you trust the content. data-bs-html="true".
placement	string | function	'right'	How to position the popover: auto, top, bottom, left, right. Can be a function. data-bs-placement="left".
selector	string | false	false	If a selector is provided, popover objects will be delegated to the specified targets. Useful for dynamically added content.
template	string	'<div class="popover" role="tooltip"><div class="popover-arrow"></div><h3 class="popover-header"></h3><div class="popover-body"></div></div>'	Base HTML to use when creating the popover. The title will be injected into .popover-header. The content will be injected into .popover-body.
title	string | element | function	''	Default title value if title attribute isn’t present. Can be a function.
trigger	string	'click'	How popover is triggered: click, hover, focus, manual. You can pass multiple triggers separated by a space. data-bs-trigger="hover focus".
offset	array | string | function	[0, 8]	(Popper option) Offset of the popover relative to its target. E.g., [10, 20] or '10,20' or data-bs-offset="10,20".
fallbackPlacements	array	['top', 'right', 'bottom', 'left']	(Popper option) Define fallback placements by order if the original placement cannot be computed.
customClass	string | function	''	Add classes to the popover when it is shown. data-bs-custom-class="my-custom-popover".
allowList	object	Default Allow List	Object which contains allowed attributes and tags for sanitizing HTML content if html is true. See Bootstrap docs for details.

Popover Methods

The following table lists all available popover methods. Call them on the Popover instance (e.g., myPopover.show()).

Method	Description
show()	Reveals an element’s popover.
hide()	Hides an element’s popover.
toggle()	Toggles an element’s popover.
dispose()	Hides and destroys an element’s popover. (Removes stored data on the DOM element)
enable()	Gives an element’s popover the ability to be shown.
disable()	Removes the ability for an element’s popover to be shown.
toggleEnabled()	Toggles the ability for an element’s popover to be shown or hidden.
update()	Updates the position of an element’s popover.
getInstance(element)	Static method which allows you to get the popover instance associated with a DOM element.
getOrCreateInstance(element, [config])	Static method which allows you to get the popover instance associated with a DOM element, or create a new one in case it wasn’t initialized.

Popover Events

The following table lists all available popover events. These events are fired at the element that triggers the popover.

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

Custom Popover Styling

You can customize the appearance of popovers using CSS. Bootstrap 5 uses CSS variables for many components, allowing for easier customization. Target .popover, .popover-header, .popover-body, and .popover-arrow.

/* Example: Custom Popover Styling */

/* Using direct CSS overrides */
.popover-header {
  background-color: #0dcaf0; /* Bootstrap's info color */
  color: white;
  font-size: 1.25rem;
  text-align: center;
}

.popover-body {
  background-color: #e9ecef; /* A light gray */
  color: #212529;
  padding: 1rem;
}

/* Example: Customizing with Bootstrap CSS Variables */
/* Place this in your custom CSS file that loads after Bootstrap */
:root {
  --bs-popover-header-bg: #6f42c1; /* A custom purple */
  --bs-popover-header-color: #fff;
  --bs-popover-body-color: #333;
  --bs-popover-border-color: rgba(0,0,0,.1);
  --bs-popover-arrow-outer-color: rgba(0,0,0,.1);
}

/* You can also create a custom class via the 'customClass' option */
.my-custom-popover .popover-header {
  background-color: green;
}

/* Resource: Check Bootstrap's _popover.scss for all available CSS variables:
   https://github.com/twbs/bootstrap/blob/main/scss/_popover.scss */