Bootstrap Tutorial

CHAPTER
40
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 popover.js and it has a dependency
of 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.
Hover over me
Via JavaScript: Enable popovers via JavaScript using the following syntax:
$('#identifier').popover(options)
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.
Popover on left
TUTORIALS POINT
Simply Easy Learning