Twitter Bootstrap Popover Tutoriall

Last update on August 19 2022 21:50:44 (UTC/GMT +8 hours)

Description

Twitter Bootstrap Popover is created using a custom Jquery Plugin. It may be used to display some information (secondary) of any element.

In this document, you will see how to use Twitter Bootstrap Popover out of the box and also how to customize it using several options available.

What is required

You must include Jquery, Twitter Bootstrap CSS and two JavaScript files - one for Twitter Bootstrap Tooltip and one for Twitter Bootstrap Popover.

JS file for the tooltip is available under js folder of your Twitter Bootstrap folder as bootstrap-popover.js and JS file for popover is available under JS folder of your Twitter Bootstrap folder as bootstrap-tooltip.js. Jquery is available under docs > assets > js of your Twitter Bootstrap folder as jquery.js; or you may point to this https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js to load Jquery.

Make sure that you load bootstrap-tooltip.js before bootstrap-popover.js.

Using Twitter Bootstrap Popover in your website

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Modal with Twitter Bootstrap</h2>
<div class="well">
<a href="#" id="example" class="btn btn-danger" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
});
</script>
</body>
</html>

View this example online.

Explanation

The following table explains the code above. It will help you to understand how to use Twitter Bootstrap Popover.

Line no in code	Code	Explanation
13	id="example"	An ID is assigned to the associated anchor. Value of the id is refereed in the JavaScript later to implement popover.
13	class="btn btn-danger"	To create a button. btn btn-danger is the classes used in the example. You may use any other class used in Twitter Bootstrap CSS or may use your own.
13	data-content="It's so simple to create a tooltip for my website!"	Value of the data-content is displayed in the body of the popover.
13	data-original-title="Twitter Bootstrap Popover"	Value of the data-original-title is displayed as the title of the popover.
13	hover for popover	Anchor text.
16	<script src="https://ajax.googleapis.com/ajax/libs/ jquery/1.7.1/jquery.min.js"></script>	Jquery is included.
17	<script src="/twitter-bootstrap/twitter-bootstrap-v2/ js/bootstrap-tooltip.js"></script>	JS file for Twitter Bootstrap Tooltip is included.
18	<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/ bootstrap-popover.js"></script>	JS file for Twitter BootstrapPopover is included.
20	$(function ()	To prepare the document. Jquery command.
21	$("#example").popover();	id example is accessed and popover() is implemented on that.

We have not created the popover out of the box here, without any customization, i.e. we have not used any options with popover().

Usage

So, you may conclude that usage of Twitter Bootstrap Popover is :

$(function ()  
{ $("identifier").popover(options);  
});

Where identifier is a Jquery selector to identify the associated anchor element. You will encounter what are the options in a while.

Options

There are certain options which may be used with popover() to customize the look and feel of the Popover.

animation

Type of the value of the animation is boolean, the default value is true and it may be used to the tooltip to bring a css fade transition effect.

placement

Type of the value of the placement may be string or function, the default value is 'right', top, bottom, and left are other values which may be used. It is used to the determine the placement of the popover around the anchor text. Here is an example of using placement option.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover with placement option Example</title> 
<meta name="description" content="Creating Modal Window with Twitter Bootstrap">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
<style>
a {
margin-left : 400px;
}
</style>
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with placement option</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltip for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_left" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_top" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
<div class="well">
<a href="#" id="example_bottom" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover();
  $("#example_left").popover({placement:'left'});
  $("#example_top").popover({placement:'top'});
  $("#example_bottom").popover({placement:'bottom'});
});
</script>
</body>
</html>

View this example online.

selector

Type of the value of the selector is a string, the default value is false. Tooltip objects are delegated to the given target by using this.

trigger

Type of the value of the trigger may be a string, the default value is 'hover', focus and manual are other values which may be used. It is used to the determine how the tooltip is initiated. Here is an example showing how to use focus option to trigger the popover.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with trigger option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with trigger options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover" data-content="It's so simple to create a tooltop for my website!" data-original-title="Twitter Bootstrap Popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover({trigger: 'focus'});
});
</script>
</body>
</html>

View this example online.

title

Type of the value of the title may be string or function, the default value is ''. This becomes the value of the title is the title attribute is not present.

content

Type of the value of the content may be string or function, the default value is ''. This becomes the value of the data-content is the data-content attribute is not present. Here is an example using the title and data-content options. This example also shows you how to use multiple options together.

<!DOCTYPE html> 
<html lang="en"> 
<head> 
<meta charset="utf-8"> 
<title>Twitter Bootstrap Popover Example with title and content option</title> 
<meta name="description" content="Creating Popover with Twitter Bootstrap with trigger option">
<link href="/twitter-bootstrap/twitter-bootstrap-v2/docs/assets/css/bootstrap.css" rel="stylesheet"> 
</head>
<body>
<div class="container">
<h2>Example of creating Popover with Twitter Bootstrap with title and content options</h2>
<div class="well">
<a href="#" id="example" class="btn btn-success" rel="popover">hover for popover</a>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-tooltip.js"></script>
<script src="/twitter-bootstrap/twitter-bootstrap-v2/js/bootstrap-popover.js"></script>
<script>
$(function ()
{ $("#example").popover({title: 'Twitter Bootstrap Popover', content: "It's so simple to create a tooltop for my website!"});
});
</script>
</body>
</html>

View this example online.

delay

Type of the value of the content may be number or object, the default value is 0. This determines the delay in showing and hiding the popover in milliseconds. The delay is applied to both show and hide if a number is provided. If an object is supplied, the structure is delay: { show: 500, hide: 100}, 500 and 100 are in milliseconds.

Changing default markup and style of the popover

Default markup of the Popover window is placed on line no 92 of the bootstrap-popover.js file. It looks like :

template: '<div class="popover"><div class="arrow"></div><div class="popover-inner"><h3 class="popover-title"></h3><div class="popover-content"><p></p></div></div></div>'

You may change this to place your own markup.

Default styles for Popover are placed on line no 3027 to 3118. You may modify this to put your own styles

You may download all the HTML, CSS, JS and image files used in our tutorials here.

Previous: Twitter Bootstrap Modals Tutorial
Next: Twitter Bootstrap Dropdown JavaScript Plugin