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:
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 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 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>
Bootstrap Tooltip Plugin