Things to know when using the popover plugin:
bootstrap.bundle.min.js
/ bootstrap.bundle.js
which contains Popper.js in order for popovers to work!title
and content
values will never show a popover.container: 'body'
to avoid rendering problems in more complex components (like our input groups, button groups, etc)..disabled
or disabled
elements must be triggered on a wrapper element..text-nowrap
on your <a>
s to avoid this behavior.prefers-reduced-motion
media query. See the reduced motion section of our accessibility documentation.
One way to initialize all popovers on a page would be to select them by their data-toggle
attribute:
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
container
optionWhen 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.
var popover = new bootstrap.Popover(document.querySelector('.example-popover'), {
container: 'body'
})
<button type="button" class="btn btn-lg btn-danger" data-toggle="popover" title="Popover title" data-content="And here's some amazing content. It's very engaging. Right?">Click to toggle popover</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="top" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on top
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="right" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on right
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="bottom" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on bottom
</button>
<button type="button" class="btn btn-secondary" data-container="body" data-toggle="popover" data-placement="left" data-content="Vivamus sagittis lacus vel augue laoreet rutrum faucibus.">
Popover on left
</button>