Bootstrap Popover
The popover is similar to tooltip, offering an extended view complete with a heading.
How To Create a Popover
To create a popover, add the data-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, and use the data-content attribute to specify the text that should 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>
Note: Popovers must be initialized with jQuery: select the specified element and call the popover() method.
<script>
$(document).ready(function(){
$('[data-toggle="popover"]').popover();
});
</script>
Positioning Popovers
By default, the popover will appear on the right side of the element. Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element:
<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>
Closing Popovers
By default, the popover is closed when you click on the element again. However, you can use the data-trigger="focus" attribute which will close the popover when clicking outside the element:
<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>
If you want the popover to be displayed when you move the mouse pointer over the element, use the data-trigger attribute with a value of "hover":
<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>
