Popovers

Minimalistic popover with no content - just title

Default content value if data-content={string|element|function} attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Disable the CSS fade transition to the popover using attribute data-bs-animation="false"

Default title value if title attribute isn't present.

If a function is given, it will be called with its this reference set to the element that the popover is attached to.

Appends the popover to a specific element. Example: container: 'body'. This option is particularly useful in that it allows you to position the popover in the flow of the document near the triggering element - which will prevent the popover from floating away from the triggering element during a window resize

Delay showing and hiding the popover (ms) - does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show

Object structure is: delay: { "show": 500, "hide": 100 }

Four options are available: top, right, bottom, and left. Directions are mirrored when using Bootstrap in RTL. Set data-bs-placement to change the direction.

How popover is triggered - click | hover | focus | manual. You may pass multiple triggers; separate them with a space. manual cannot be combined with any other trigger.

Base HTML to use when creating a popover in Bootstrap 5. The popover's title is injected into an element with the .popover-header class, and the content is injected into an element with the .popover-body class. The popover includes an .arrow element for the pointer. The outermost wrapper of the popover must have the .popover class, and it is automatically generated by Bootstrap's JavaScript when initializing a popover.

Use the focus trigger to dismiss popovers on the user’s next click of an element other than the toggle element. Dismissing on next click requires specific HTML for proper cross-browser and cross-platform behavior.