• Menu
  • Skip to primary navigation
  • Skip to main content
  • Skip to primary sidebar

JavaBeat

Java Tutorial Blog

  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)
  • Java
    • Java 7
    • Java 8
    • Java EE
    • Servlets
  • Spring Framework
    • Spring Tutorials
    • Spring 4 Tutorials
    • Spring Boot
  • JSF Tutorials
  • Most Popular
    • Binary Search Tree Traversal
    • Spring Batch Tutorial
    • AngularJS + Spring MVC
    • Spring Data JPA Tutorial
    • Packaging and Deploying Node.js
  • About Us
    • Join Us (JBC)

Bootstrap Popover Plugin

July 26, 2014 //  by Krishna Srinivasan//  Leave a Comment

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:

  • 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 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 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>
  • Run Bootstrap Popover using Methods Example

Bootstrap Popover using Methods Example

Category: Bootstrap

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.

Previous Post: « Bootstrap Tooltip Plugin
Next Post: Bootstrap Scrollspy Plugin »

Reader Interactions

Leave a Reply Cancel reply

Your email address will not be published. Required fields are marked *

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Primary Sidebar

Follow Us

  • Facebook
  • Pinterest

FEATURED TUTORIALS

New Features in Spring Boot 1.4

Difference Between @RequestParam and @PathVariable in Spring MVC

What is new in Java 6.0 Collections API?

The Java 6.0 Compiler API

Introductiion to Jakarta Struts

What’s new in Struts 2.0? – Struts 2.0 Framework

JavaBeat

Copyright © by JavaBeat · All rights reserved
Privacy Policy | Contact