Bootstrap Popover Plugin

A popover is similar to tooltip which is used to display secondary information of any element when it is clicked by the user. We can display information similar to tooltip in four directions left, right, top and bottom. It provides complete view with a heading. Popovers are just an extension to tooltips that look different and are designed for more content. Popovers have option to display both header section and content section.

This tutorial explains following topics which are used with bootstrap popover.

Creating Popovers via Data Attributes
Creating Popovers via JavaScript
Popover Options
Popover Methods

also read:

Bootstrap Setup

Bootstrap Typography

The below examples shows the various techniques used for implementing the popovers in Bootstrap. If you have any questions about bootstrap popovers, please write it in the comments section.

Bootstrap Popover via Data Attributes

We can create popover by using the attribute data-toggle=”popover” to anchor or button element. The data-content=”some text” attribute is used to specify content for the specific element.The following is an example:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(function(){
   $("[data-toggle='popover']").popover();
 });
</script>
</head>
<body>
<div class="container">
<div style="padding:30px 100px 10px;">
<h2>Popover via Data Attributes</h2><br><br>
<button type="button" class="btn btn-success" data-toggle="popover"
data-placement="left" title="Left Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on left</button>

<button type="button" class="btn btn-danger" data-toggle="popover"
data-placement="top" title="Top Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on top</button>

<button type="button" class="btn btn-info" data-toggle="popover"
data-placement="bottom" title="Bottom Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on bottom</button>

<button type="button" class="btn btn-warning" data-toggle="popover"
data-placement="right" title="Right Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on right</button>
</div>
</div>
</body>
</body>
</html>

Run Bootstrap Popover via Data Attributes Example

Bootstrap Popover via JavaScript

We can also display popover by using popover() method with id or class selector in the JavaScript code as shown in the below example.

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $(".pop-top").popover({
      placement:'top'
   });
   $(".pop-right").popover({
         placement:'right'
   });
   $(".pop-bottom").popover({
         placement:'bottom'
   });
   $(".pop-left").popover({
         placement:'left'
   });
});
</script>
</head>
<body>
<div class="container">
<div style="padding:30px 100px 10px;">
<h2>Popover via JavaScript</h2><br><br>
<button type="button" class="btn btn-success pop-left"
data-placement="left" title="Left Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on left</button>

<button type="button" class="btn btn-danger pop-top"
data-placement="top" title="Top Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on top</button>

<button type="button" class="btn btn-info pop-bottom"
data-placement="bottom" title="Bottom Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on bottom</button>

<button type="button" class="btn btn-warning pop-right"
data-placement="right" title="Right Popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Tooltip on right</button>
</div>
</div>
</body>
</body>
</html>

Run Bootstrap Popover via JavaScript Example

Bootstrap Popover Options

The following table shows options which can be used with popover:

Option	Type Value	Default Value	Description
animation	boolean	true	It applies fade transition to the popover.
html	boolean	false	It inserts html elements to the popover.
placement	string/function	right	It sets the position of the popover. If it does not contain any position, then by default it displays to right position.
selector	string	false	Delegate popover objects to specified targets.
title	string/function	false	It sets default value if title attributes is not present.
trigger	string	’click’	It defines how tooltip will be triggered such as click, hover, focus and manual.
delay	number/object	0	It inserts delay before popover is showed or hidden in ms which does not apply to manual trigger type.
container	string/false	false	It appends popover to a specific element.

Bootstrap Popover Methods

Method	Description	Example
$().popover(options)	It attaches popover handler to an element collection.	$().popover(options)
.popover(‘toggle’)	It toggles element’s popover.	$(‘#element’).popover(‘toggle’)
.popover(‘show’)	It shows elements popover.	>$(‘#element’).popover(‘show’)
.popover(‘hide’)	It hides an elements popover.	>$(‘#element’).popover(‘hide’)
.popover(‘destroy’)	It hides and destroys elements popover.	>$(‘#element’).popover(‘destroy’)

The following example shows use of popover methods:

<!DOCTYPE html>
<head>
<title>Bootstrap Example</title>
<link rel="stylesheet" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script>
$(document).ready(function(){
   $(".show-popover").click(function(){
      $(".my-popover a").popover('show');
   });
   $(".hide-popover").click(function(){
         $(".my-popover a").popover('hide');
   });
  $(".toggle-popover").click(function(){
        $(".my-popover a").popover('toggle');
  });
  $(".destroy-popover").click(function(){
        $(".my-popover a").popover('destroy');
  });
});
</script>
</head>
<body>
<div class="container">
<h2>Popover using Methods</h2><br><br>
<p class="my-popover" style="padding:30px 100px 10px;">
<a href="#" title="My Popover" class="btn btn-lg btn-success" data-toggle="popover" data-content="Popover display secondary information of any element when it is clicked by the user.">Popover</a></p>
<button type="button" class="btn btn-success show-popover">Show</button>
<button type="button" class="btn btn-danger hide-popover">Hide</button>
<button type="button" class="btn btn-info toggle-popover">Toggle</button>
<button type="button" class="btn btn-warning destroy-popover">Destroy</button>
</div>
</body>
</body>
</html>