Bootstrap Popover Plugin

Bootstrap is offering one more interesting plugin which called Popover, this is similar to tooltip but with enhanced feature of heading. There is a very simple method to show bootstrap popover plugin, you simply need to hover your cursor over the element. Following method requires a tooltip.

If you want to implement functionality of this plugin individually, simple include the popover.js file along the other JS files. Else as we have discussed in the tutorial of Bootstrap Plugin Overview, you can include bootstrap.jsor the minified bootstrap.min.js.

Usage

You can use the following two methods for popover via JavaScript and via data attributes.

Via data attributes

Use anchor or button tag with data-toggle="popover" attribute to activate the popover. The title attribute of the anchor will be show in the popover and by default popover will show on the top.

<a href="#" data-toggle="popover" title="Example popover">
 Hover over me
</a>

Via JavaScript

Using following code enable popovers via JavaScript:

$('#identifier').popover(options)

Static popover examples

Four options are available: top, right, bottom, and left aligned.

<div class="popover top">
 <div class="arrow"></div>
 <h3 class="popover-title">Popover top</h3>
 <div class="popover-content">
 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
 </div>
</div> 

<div class="popover right">
 <div class="arrow"></div>
 <h3 class="popover-title">Popover right</h3>
 <div class="popover-content">
 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
 </div>
</div> 

<div class="popover bottom">
 <div class="arrow"></div>
 <h3 class="popover-title">Popover bottom</h3> 
 <div class="popover-content">
 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
 </div>
</div> 

<div class="popover left">
 <div class="arrow"></div>
 <h3 class="popover-title">Popover left</h3>
 <div class="popover-content">
 <p>Sed posuere consectetur est at lobortis. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum.</p>
 </div>
</div>

Demo

Live Demo

<button type="button" class="btn btn-lg btn-danger" data-toggle="popover"
 title="Popover title" data-content="And here's some amazing content. 
It's very engaging. Right?">Click to toggle popover</button>

Demo

Four Directions Examples

This example shows the use of popover plugin via data attributes.

<div class="container" style="padding: 100px 50px 10px;" >
 <button type="button" class="btn btn-default" title="Popover title" 
 data-container="body" data-toggle="popover" data-placement="left" 
 data-content="Some content in Popover on left">
 Popover on left
 </button>
 <button type="button" class="btn btn-primary" title="Popover title" 
 data-container="body" data-toggle="popover" data-placement="top" 
 data-content="Some content in Popover on top">
 Popover on top
 </button>
 <button type="button" class="btn btn-success" title="Popover title" 
 data-container="body" data-toggle="popover" data-placement="bottom" 
 data-content="Some content in Popover on bottom">
 Popover on bottom
 </button>
 <button type="button" class="btn btn-warning" title="Popover title" 
 data-container="body" data-toggle="popover" data-placement="right" 
 data-content="Some content in Popover on right">
 Popover on right
 </button>
 </div>

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

Demo

Options

Following listed options can be added via Bootstrap Data API or called via JavaScript.

Name	Type	Default	Data attribute name	Description
animation	boolean	true	data-animation	Applies a CSS fade transition to the popover.
html	boolean	false	data-html	Inserts HTML into the popover. If false, jQuery’s text method will be used to insert content into the dom. Use text if you’re worried about XSS attacks.
placement	string|function	right	data-placement	Specifies how to position the popover (i.e., top|bottom|left|right|auto). When auto is specified, it will dynamically reorient the popover. For example, if placement is “auto left”, the popover will display to the left when possible, otherwise it will display right.
selector	string	false	data-selector	If a selector is provided, popover objects will be delegated to the specified targets.
title	string | function	"	data-title	The title option is the default title value if the title attribute isn’t present.
trigger	string	click	data-trigger	Defines how the popover is triggered: click| hover | focus | manual. You may pass multiple triggers; separate them with a space.
delay	number | object	0	data-delay	Delays showing and hiding the popover in ms does not apply to manual trigger type. If a number is supplied, delay is applied to both hide/show. Object structure is: delay: show: 500, hide: 100
container	string | false	false	data-container	Appends the popover to a specific element. Example: container: ‘body’

Methods

These are some useful methods for popover:

Method	Description
Options: .popover(options)	Initializes popovers for an element collection. $().popover(options)
Toggle: .popover(‘toggle’)	Toggles an element’s popover. $('#element').popover('toggle')
Show: .popover(‘show’)	Reveals an element’s popover. $('#element').popover('show')
Hide: .popover(‘hide’)	Hides an element’s popover. $('#element').popover('hide')
Destroy: .popover(‘destroy’)	Hides and destroys an element’s popover. $('#element').popover('destroy')

Example

This example shows popover plugin methods:

<div class="container" style="padding: 100px 50px 10px;" >
 <button type="button" class="btn btn-default popover-show" 
 title="Popover title" data-container="body" 
 data-toggle="popover" data-placement="left" 
 data-content="Some content in Popover with show method">
 Popover on left
 </button>
 <button type="button" class="btn btn-primary popover-hide" 
 title="Popover title" data-container="body" 
 data-toggle="popover" data-placement="top" 
 data-content="Some content in Popover-hide method">
 Popover on top
 </button>
 <button type="button" class="btn btn-success popover-destroy" 
 title="Popover title" data-container="body" 
 data-toggle="popover" data-placement="bottom" 
 data-content="Some content in Popover-destroy method">
 Popover on bottom
 </button>
 <button type="button" class="btn btn-warning popover-toggle" 
 title="Popover title" data-container="body" 
 data-toggle="popover" data-placement="top" 
 data-content="Some content in Popover-toggle method">
 Popover on right
 </button><br><br><br><br><br><br>
 <p class="popover-options">
 <a href="#" type="button" class="btn btn-warning" title="<h2>Title</h2>" 
 data-container="body" data-toggle="popover" data-content="
 <h4>Some content in Popover-options method</h4>">
 Popover
 </a>
 </p>
 <script>
 $(function () $('.popover-show').popover('show'););
 $(function () $('.popover-hide').popover('hide'););
 $(function () $('.popover-destroy').popover('destroy'););
 $(function () $('.popover-toggle').popover('toggle'););
 $(function () $(".popover-options a").popover(html : true ););
 </script>
</div>

Demo

Events

Following mentioned list of events work with popover plugin.

Event	Description
show.bs.popover	This event fires immediately when the show instance method is called. $('#mypopover').on('show.bs.popover', function () // do something… )
shown.bs.popover	This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).. $('#mypopover').on('shown.bs.popover', function () // do something… )
hide.bs.popover	This event is fired immediately when the hide instance method has been called. $('#mypopover').on('hide.bs.popover', function () // do something… )
hidden.bs.popover	This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete). $('#mypopover').on('hidden.bs.popover', function () // do something… )

Example

The following example demonstrates the Popover plugin events:

<div clas="container" style="padding: 100px 50px 10px;" >
 <button type="button" class="btn btn-primary popover-show" 
 title="Popover title" data-container="body" 
 data-toggle="popover" 
 data-content="Some content in Popover with show method">
 Popover on left
 </button>

 </div>
 <script>
 $(function () $('.popover-show').popover('show'););
 $(function () $('.popover-show').on('shown.bs.popover', function () 
 alert("Alert message on show");
 ));
 </script>
</div>

Demo

Bootstrap Popover Plugin