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.

  1. Creating Popovers via Data Attributes
  2. Creating Popovers via JavaScript
  3. Popover Options
  4. Popover Methods

also read:

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>

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>

Bootstrap Popover via JavaScript Example

Bootstrap Popover Options

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

OptionType ValueDefault ValueDescription
animationbooleantrueIt applies fade transition to the popover.
htmlbooleanfalseIt inserts html elements to the popover.
placementstring/functionrightIt sets the position of the popover. If it does not contain any position, then by default it displays to right position.
selectorstringfalseDelegate popover objects to specified targets.
titlestring/functionfalseIt sets default value if title attributes is not present.
triggerstring’click’It defines how tooltip will be triggered such as click, hover, focus and manual.
delaynumber/object0It inserts delay before popover is showed or hidden in ms which does not apply to manual trigger type.
containerstring/falsefalseIt appends popover to a specific element.

Bootstrap Popover Methods

MethodDescriptionExample
$().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>

Bootstrap Popover using Methods Example

Comments

comments

About Krishna Srinivasan

He is Founder and Chief Editor of JavaBeat. He has more than 8+ years of experience on developing Web applications. He writes about Spring, DOJO, JSF, Hibernate and many other emerging technologies in this blog.

Speak Your Mind

*