Bootstrap Popover

The bootstrap popover plugin is very similar to tooltips. It appears as a pop-up box when the user clicks on an element. The difference is that the popover can contain much more content.

To create a popover, add the data-toggle="popover" attribute to an element and the title attribute to specify the header text of the popover, the data-content attribute to specify the text that should be displayed inside the popover's body.

See this example:

Bootstrap Positioning Popovers

By default the popover is appeared on the ride side of the element but you can set a position of the popover where ever you want such as top, bottom, side and left.

Use the data-placement attribute to set the position of the popover on top, bottom, left or the right side of the element.

See this example:

Bootstrap Closing Popovers

By default, the popover is closed when you click on the element again. But you can use the attribute data-trigger="focus" to close the popover when clicking outside the element.

See this example: