BS5 Popover
Bootstrap 5 Popover
The Popover component is a pop-up window that shows up when a user clicks on an element, much as tooltips. The popover can hold a lot more content, which is the difference.
==== button mukavu ====
How To Create a Popover
Add the data-toggle=”popover” attribute to an element to create a popover.
To provide the text that should appear inside the popover’s body, use the data-content attribute and the title attribute to specify the popover’s header:
<button type="button" class="btn btn-primary" data-bs-toggle="popover" title="Popover Header" data-bs-content="Some content inside the popover">Toggle popover</button>
Note: For Popovers to function, JavaScript must be initialized.
To allow all popovers in the document, use the following code:
Example
<script>
var popoverTriggerList = [].slice.call(document.querySelectorAll('[data-bs-toggle="popover"]'))
var popoverList = popoverTriggerList.map(function (popoverTriggerEl) {
return new bootstrap.Popover(popoverTriggerEl)
})
</script>
Positioning Popovers
The popover will by default show up on the element’s right side.
To position the popover at the top, bottom, left, or right of the element, use the data-placement attribute:
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>
Note: If there is insufficient space for the placement attributes, they do not function as you would expect. For instance, it will display the popover below the element or to the right (wherever there is room for it) if you use the top placement at the top of a page (where there is no room for it).
Closing Popovers
Clicking on the element again closes the popover by default. However, if you click outside of the element, the popover will close if you use the data-trigger=”focus” attribute:
Example
<a href="#" title="Dismissible popover" data-bs-toggle="popover" data-bs-trigger="focus" data-bs-content="Click anywhere in the document to close this popover">Click me</a>
Hoverable Popover
Tip: Use the data-bs-trigger attribute with a value of “hover” if you want the popover to appear when the mouse cursor passes over the element:
Example
<a href="#" title="Header" data-bs-toggle="popover" data-bs-trigger="hover" data-bs-content="Popover text">Hover over me</a>
