# Popovers

###### Bootstrap popovers are interactive, dismissible overlays that provide additional content when users click or hover over an element.

## Basic Popover

Minimalistic popover with no content - just title

## Popover Content

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.

## Popover Animation

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

## Popover Title

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.

## Popover Container

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
hide container
The popover is nested inside this container but displayed on the element above. Once this container is hidden the popover will not be visible. Try hiding this container by pressing the "hide" button above

## Delayed Popover

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 }`

## Popover Placement

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.

## Popover Triggers

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.

## Popover Template

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.

## Dismissable 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.
Dismissible popover

#### Hi Sunny,

how can I help you today?
Analyze my data

Create a new report

Summarize my Calendar

App Builder
Unlock limitless design potential with 16+ layout combinations and extensive customization options—tailor your dashboard to fit your exact needs.
Header position fixed
Navigation full height
Navigation position fixed
Navigation collapsed
Navigation Minified
Dark Navigation
Colorblind Mode
High Contrast Mode