Bootstrap Popover Plugin

The Popover Plugin

The Popover plugin is similar to tooltips;This open a pop-up box that appears when the user clicks on an element. The difference is that the popover can contain much more content.

Click To Toggle Popover

How To Create a Popover

We can create a popover, by adding the data-toggle="popover" attribute to an element.

By adding 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="I am text inside the popover">Toggle popover</a>

The below code will enable all popovers in the document:


Try it Yourself »

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>
Try it Yourself »

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="I can close change document to close this popover">Click me</a>
Try it Yourself »

Tip: 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">I'm Hover </a>
Try it Yourself »