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.

Initialization

Bootstrap popovers require initialization before you can use them.

You can initialize popovers with the following code:

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

Popover Example

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

xxxxxxxxxx
 
<button type="button" class="btn btn-primary" data-toggle="popover" data-content="Popover content goes here..." style="margin:20px;">
  Click me
</button>

View Output

Placement

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

xxxxxxxxxx
 
<div style="text-align:center">
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="right" data-content="Popover content goes here..." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="bottom" data-content="Popover content goes here..." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="top" data-content="Popover content goes here..." style="margin:40px;">
  Click me
</button>
<button type="button" class="btn btn-primary" data-toggle="popover" data-placement="left" data-content="Popover content goes here..." style="margin:40px;">
  Click me
</button>
</div>

View Output

Title

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

xxxxxxxxxx
 
<button type="button" class="btn btn-primary" title="Popover Title" data-toggle="popover" data-placement="right" data-content="Popover content goes here..." style="margin:40px;">
  Click me
</button>

View Output

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":

xxxxxxxxxx
 
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="focus" data-placement="right" data-content="Now click somewhere else">
  Click me
</button>

View Output

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":

xxxxxxxxxx
 
<button type="button" class="btn btn-primary" data-toggle="popover" data-trigger="hover" data-placement="right" data-content="Now hover out.">
  Hover over me
</button>

View Output