Bs Popover

Bootstrap Popover Plugin

---

The Popover Plugin

The Popover plugin is like to tooltips; it is a pop-up box that appears when the user clicks on an element. The divergence is that the popover tin seat the sack comprise much to a greater extent than content.

Click To Toggle Popover

Tip: Plugins tin seat the sack survive included individually (using Bootstrap's private "popover.js" file), or all directly (using "bootstrap.js" or "bootstrap.min.js").

---

How To Create a Popover

To arrive at a popover, add together the data-toggle="popover" attribute to an element.
Use the title attribute to specify the header text of the popover, as well as usage the data-content attribute to specify the text that should survive displayed within the popover's body:

<a href="#" data-toggle="popover" title="Popover Header" data-content="Some content within the popover">Toggle popover</a>

Note: Popovers must survive initialized amongst jQuery: direct the specified chemical cistron as well as telephone vociferation upward the popover() method.
The next code volition enable all popovers inwards the document:

Example

<script>
$(document).ready(function(){
    $('[data-toggle="popover"]').popover();
});</script>

---

Positioning Popovers

By default, the popover volition seem on the correct side of the element.
Use the data-placement attribute to laid the set of the popover on top, bottom, left or the correct 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 tin seat the sack also usage the data-placement attribute amongst a value of "auto", which volition permit the browser arrive at upward one's heed the set of the popover. For example, if the value is "auto left", the popover volition display on the left side when possible, otherwise on the right.

---

Closing Popovers

By default, the popover is closed when y'all click on the chemical cistron again. However, y'all tin seat the sack usage the data-trigger="focus" attribute which volition unopen the popover when clicking exterior the element:

Example

<a href="#" title="Dismissible popover" data-toggle="popover" data-trigger="focus" data-content="Click anywhere inwards the document to unopen this popover">Click me</a>

Tip: If y'all desire the popover to survive displayed when y'all deed the mouse pointer over the element, usage the data-trigger attribute amongst a value of "hover":

Example

<a href="#" title="Header" data-toggle="popover" data-trigger="hover" data-content="Some content">Hover over me</a>

---