How To Create a Popover
To create a popover, add the data-bs-toggle="popover" attribute to an element.
Example
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header"You can click on above box to edit the code and run again.
data-bs-content="Some content inside the popover">Toggle popover</button>
Example
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
You can click on above box to edit the code and run again.Positioning Popovers
Use the data-bs-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:
Example
<a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="top" data-content="Content">Top</a> <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="bottom" data-content="Content">Bottom</a> <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="left" data-content="Content">Left</a> <a href="#" title="Header" data-bs-toggle="popover" data-bs-placement="right" data-content="Content">Right</a>You can click on above box to edit the code and run again.
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the data-bs-trigger="focus"
attribute which will close the popover when clicking outside the element:
Example
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus"You can click on above box to edit the code and run again.
data-bs-content="Click anywhere in the document to close this popover">Click me</a>
Hoverable Popover
the popover to be displayed when you move the mouse pointer over the element, use the data-bs-trigger attribute with a value of "hover":