---
layout: docs
title: Popovers
description: Documentation and examples for adding Bootstrap popovers, like those found in iOS, to any element on your site.
group: components
toc: true
---
## Overview
Things to know when using the popover plugin:
- Popovers rely on the third party library [Popper](https://popper.js.org/) for positioning. You must include [popper.min.js]({{< param "cdn.popper" >}}) before `bootstrap.js`, or use one `bootstrap.bundle.min.js` which contains Popper.
- Popovers require the [popover plugin]({{< docsref "/components/popovers" >}}) as a dependency.
- Popovers are opt-in for performance reasons, so **you must initialize them yourself**.
- Zero-length `title` and `content` values will never show a popover.
- Specify `container: 'body'` to avoid rendering problems in more complex components (like our input groups, button groups, etc).
- Triggering popovers on hidden elements will not work.
- Popovers for `.disabled` or `disabled` elements must be triggered on a wrapper element.
- When triggered from anchors that wrap across multiple lines, popovers will be centered between the anchors' overall width. Use `.text-nowrap` on your ``s to avoid this behavior.
- Popovers must be hidden before their corresponding elements have been removed from the DOM.
- Popovers can be triggered thanks to an element inside a shadow DOM.
{{< callout info >}}
{{< partial "callout-info-sanitizer.md" >}}
{{< /callout >}}
{{< callout info >}}
{{< partial "callout-info-prefersreducedmotion.md" >}}
{{< /callout >}}
Keep reading to see how popovers work with some examples.
## Examples
### Enable popovers
As mentioned above, you must initialize popovers before they can be used. One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute, like so:
```js
var popoverTriggerList = Array.prototype.slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
```
### Live demo
We use JavaScript similar to the snippet above to render the following live popover. Titles are set via `title` attribute and body content is set via `data-bs-content`.
{{< example >}}
{{< /example >}}
### Four directions
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.
{{< example >}}
{{< /example >}}
### Custom `container`
When you have some styles on a parent element that interfere with a popover, you'll want to specify a custom `container` so that the popover's HTML appears within that element instead. This is common in responsive tables, input groups, and the like.
```js
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
```
### Custom popovers
{{< added-in "5.2.0" >}}
You can customize the appearance of popovers using [CSS variables](#variables). We set a custom class with `data-bs-custom-class="custom-popover"` to scope our custom appearance and use it to override some of the local CSS variables.
{{< scss-docs name="custom-popovers" file="site/assets/scss/_component-examples.scss" >}}
{{< example class="custom-popover-demo" >}}
{{< /example >}}
### Dismiss on next click
Use the `focus` trigger to dismiss popovers on the user's next click of a different element than the toggle element.
{{< callout danger >}}
#### Specific markup required for dismiss-on-next-click
For proper cross-browser and cross-platform behavior, you must use the `` tag, _not_ the `