BS4 Popover
Bootstrap 4 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:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Note: To initialize a popover, select the desired element and invoke the popover() method using jQuery.
To allow all popovers in the document, use the following code:
Example
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
});</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-toggle="popover" data-placement="top" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="bottom" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="left" data-content="Content">Click</a>
<a href="#" title="Header" data-toggle="popover" data-placement="right" data-content="Content">Click</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-toggle="popover" data-trigger="focus" data-content="Click anywhere in the document to close this popover">Click me</a>
Advice: Use the data-trigger attribute with a value of “hover” if you want the popover to appear when you move the mouse cursor over the element:
Example
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
