Bootstrap 3 Popovers

Add iOS style overlay content with the Bootstrap popover component.

Bootstrap provides a popover component that displays, small overlay content, similar to that found in iOS.


Bootstrap popovers require initialization before you can use them.

You can initialize popovers with the following code:

Popover Example

Use data-toggle="popover" to define the popover, and data-content="" to provide the content for the popover.


You can use data-placement to specify for the popover to appear at the top, bottom, left or right:


Any title attribute you provide on the element will become the title of the popup:

Closing Popovers

You can make a popover close when the user clicks anywhere within the document (as opposed to clicking the element that triggered it — the default behavior).

To close a popover like this, use data-trigger="focus":

Popovers on Mouseover

You can change it so that the popover is triggered by a mouseover event, rather than a click.

To do this, use data-trigger="hover":