YouTip

The Popover plugin is similar to the Tooltip plugin, providing an extended view. To activate a popover, users simply need to hover over an element. The content of the popover can be fully populated using the Bootstrap Data API. This method depends on the Tooltip plugin.

If you want to include the functionality of this plugin separately, you need to include popover.js, which depends on the Tooltip plugin. Alternatively, as mentioned in the Bootstrap Plugins Overview chapter, you can include bootstrap.js or the minified version bootstrap.min.js.

Usage

The Popover plugin generates content and markup as needed. By default, popovers are placed after their triggering elements. You can add popovers in two ways:

• Using data attributes: To add a popover, simply add data-toggle="popover" to an anchor/button tag. The anchor's title becomes the popover's text. By default, the plugin places the popover at the top. Hover over me
• Using JavaScript: Enable popovers via JavaScript: $('#identifier').popover(options)

The Popover plugin is not a pure CSS plugin like the dropdown and other plugins discussed earlier. To use this plugin, you must activate it with jQuery (read JavaScript). Use the following script to enable all popovers on the page:

$(function () { $("[data-toggle='popover']").popover(); });

Example

The following example demonstrates the usage of the Popover plugin using data attributes.

Example

$(function(){ $("[data-toggle='popover']").popover(); });

Try it yourself »

The result is as follows:

Options

Some options are added via the Bootstrap Data API or called via JavaScript. The following table lists these options:

Option Name	Type/Default	Data Attribute Name	Description
animation	boolean Default: true	data-animation	Applies a CSS fade transition effect to the popover.
html	boolean Default: 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 concerned about XSS attacks.
placement	string|function Default: top	data-placement	Specifies how to position the popover (i.e., top|bottom|left|right|auto). When specified as auto, the popover will be dynamically adjusted. For example, if placement is "auto left", the popover will be displayed on the left if possible, otherwise on the right.
selector	string Default: false	data-selector	If a selector is provided, the popover object will be delegated to the specified target.
title	string|function Default: ''	data-title	If the title attribute is not specified, the title option is the default title value.
trigger	string Default: 'hover focus'	data-trigger	Defines how the popover is triggered: click | hover | focus | manual. You can pass multiple triggers, separated by spaces.
delay	number|object Default: 0	data-delay	Delays showing and hiding the popover in milliseconds (does not apply to manual trigger type). If a number is provided, the delay applies to both showing and hiding. If an object is provided, the structure is as follows: delay: { show: 500, hide: 100 }
container	string|false Default: false	data-container	Appends the popover to a specific element. Example: container: 'body'

Methods

Below are some useful methods in the Popover plugin:

Method	Description	Example
Options: .popover(options)	Attaches a popover handler to an element collection.	$().popover(options)
Toggle: .popover('toggle')	Toggles the visibility of an element's popover.	$('#element').popover('toggle')
Show: .popover('show')	Shows 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

The following example demonstrates the methods of the Popover plugin:

Example

$(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});});

Try it yourself »

The result is as follows:

Events

The following table lists the events used in the Popover plugin. These events can be used as hooks in functions.

Event	Description	Example
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 is visible to the user (will wait for CSS transitions to complete).	$('#mypopover').on('shown.bs.popover', function () { // do something... })
hide.bs.popover	This event fires immediately when the hide instance method is called.	$('#mypopover').on('hide.bs.popover', function () { // do something... })
hidden.bs.popover	This event is fired when the popover is 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 events of the Popover plugin:

Example

$(function(){ $('.popover-show').popover('show');}); $(function(){ $('.popover-show').on('shown.bs.popover', function(){alert("Alert message when shown"); })});

Try it yourself »

The result is as follows: