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.


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.

Via JavaScript

Using following code enable popovers via JavaScript:

Static popover examples

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

Live Demo

Four Directions Examples

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


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:
container string | false false data-container Appends the popover to a specific element.
Example: container: ‘body’


These are some useful methods for popover:

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


This example shows popover plugin methods:


Following mentioned list of events work with popover plugin.

Event Description This event fires immediately when the show instance method is called. This event is fired when the popover has been made visible to the user (will wait for CSS transitions to complete).. This event is fired immediately when the hide instance method has been called. This event is fired when the popover has finished being hidden from the user (will wait for CSS transitions to complete).


The following example demonstrates the Popover plugin events:

Leave a Reply

Your email address will not be published. Required fields are marked *