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 functionapty inspanidually, 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.

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

Via JavaScript − Enable popovers via JavaScript using the following syntax −

$( #identifier ).popover(options)

Popover plugin is NOT only-css plugins pke 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.

<span 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>
   
</span>

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