BS Popover
The Popover Plugin
The Popover plugin works similarly to tooltips, appearing as a pop-up box when the user clicks on an element. The difference is that the popover can hold a lot more content.
—–BUTTON MUKAVA—-
Tip: Plugins can be added individually (via Bootstrap’s “popover.js” file) or all at once (“bootstrap.js” or “bootstrap.min.js”).
How To Create a Popover
To create a popover, apply the data-toggle=”popover” property to an element.
The title attribute specifies the popover’s header text, while the data-content attribute specifies the text to be displayed inside the popover’s body:
<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content inside the popover">Toggle popover</a>
Popovers must be initialized with jQuery by selecting the given element and calling the popover() method.
The code below will activate all popovers in the document:
Example
<script>window.addEventListener('DOMContentLoaded', function() {
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
});</script>
Positioning Popovers
By default, the popover appears on the right side of the element.
The data-placement attribute can be used to position the popover on the top, bottom, left, or right side of the element.
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>
Tip: You can also use the data-placement attribute with the value “auto” to let the browser determine the position of the popover. For example, if the value is “auto left”, the popover will appear on the left side if possible, otherwise on the right.
Closing Popovers
When you click on the same element again, the popover is automatically closed. However, you can use the data-trigger=”focus” attribute to close the popover when clicking outside the element.
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>
Tip: To display the popover when you move the mouse pointer over the element, use the data-trigger property with a value of “hover”:
Example
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
