# Bootstrap 5 Popovers
Documentation and examples for adding Bootstrap popovers to any element on your site or app.
> This feature is only available in **AdminKit PRO**. [Learn more](/pricing/).
## Example: Enable popovers everywhere
One way to initialize all popovers on a page would be to select them by their `data-bs-toggle` attribute:
```js
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
```
## Example: Using the `container` option
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.
```js
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
```
## Example
```html
```
### Four directions
Four options are available: top, right, bottom, and left aligned. Directions are mirrored when using Bootstrap in RTL.
```html
```
### Disabled elements
Elements with the `disabled` attribute aren't interactive, meaning users cannot hover or click them to trigger a popover (or tooltip). As a workaround, you'll want to trigger the popover from a wrapper `