Bootstrap - Popover Plugin

The popover is similar to tooltip, offering an extended view complete with a heading. For the popover to activate, a user just needs to hover the cursor over the element. The content of the popover can be populated entirely using the Bootstrap Data API. This method requires a tooltip.

If you want to include this plugin functionality individually, then you will need the popover.js and it has a dependency of the tooltip plugin. Else, as mentioned in the chapter Bootstrap Plugins Overview, you can include bootstrap.js or the minified bootstrap.min.js.

Usage

The popover plugin generates content and markup on demand, and by default places popover after their trigger element. You can add popover in the following two ways −

Via data attributes − To add a popover, add data-toggle = "popover" to an anchor/button tag. The title of the anchor will be the text of a popover. By default, popover is set to top by the plugin.

Popover plugin is NOT only-css plugins like dropdown or other plugins discussed in previous chapters. To use this plugin you MUST activate it using jquery (read javascript). To enable all the popovers on your page just use this script −

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

Example

The following example demonstrates the use of popover plugin via data attributes.