Quick Reach
The popover in Bootstrap
The Popover is a piece of content like tooltips or overlay content that can be added to any element as a source of secondary information or help to assist visitor of the website. For example, as you create an account in a website, while creating password you can show a user the requirements to create right password e.g. password must be 8 characters long, must contain a capital letter and a special symbol etc.
In Bootstrap, you can create popover quite easily by using the popover.js plugin. Bootstrap also requires including the tooltip.js plug-in to create popovers and ensure that tooltip.js is loaded before popover.js
If you just intend to use popover in your web project by using the Bootstrap framework you can only include popover.js plugin file. Otherwise, if you already included bootstrap.min.js or bootstrap.js to use other features then you do not need to include popover plugin separately.
Bootstrap popover example
Following is a basic example of creating a popover with Twitter Bootstrap V3. We are using bootstrap.min.js, so there is no need to include plugin files separately. As you click on the button the bootstrap popover will be shown. As such, this is popover toggle example you can click the button to show and hide the popover.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
|
<!DOCTYPE html>
<html>
<head>
<title>popover example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
</head>
<body>
<div>
<h1>popover bootstrap Example</h1>
<button type=“button” data-toggle=“popover” title=“Popover Title will be here”
data-content=“You will right any information or content for popover here!”>Example of Toggle Popover in Bootstrap</button>
<script>
$(function ()
{ $(“[data-toggle=’popover’]”).popover();
});
</script>
</div>
</body>
</html>
|
Popover with input password example
The following example creates a popover as your enter the cursor to the password text field. The popover will guide what are the requirements of creating a password. You might have noticed this type in many other websites while creating an account. For variation purpose, we have placed popover initialize code in the <head> section.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
|
<!DOCTYPE html>
<html>
<head>
<title>popover example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script>
$(function ()
{ $(“#password1”).popover();
});
</script>
</head>
<body>
<div class=“container”>
<h1>Bootstrap popover Example</h1>
<div class=“col-sm-5”>
<input type=“password” id=“password1” placeholder=“password” data-toggle=“popover” title=“Password Requirements” data-content=“Must be 8 characters long! Must contain a capital letter”>
</div>
</div>
</body>
</html>
|
Example of setting position of popover by JavaScript
You can also set the position of popover by using the placement option in the data attribute or javascript. Following example uses four buttons with popover and displays popover on the top, right, left and bottom positions by using the JavaScript.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
|
<!DOCTYPE html>
<html>
<head>
<title>popover example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script type=“text/javascript”>
$(document).ready(function(){
$(“#toppopover”).popover({placement : ‘top’});
$(“#leftpopover”).popover({ placement : ‘left’});
$(“#rightpopover”).popover({placement : ‘right’});
$(“#bottompopover”).popover({placement : ‘bottom’});
});
</script>
</head>
<body>
<div class=“container”>
<h1>popover Example</h1><br /><br />
<div>
<button type=“button” class=“btn btn-primary” id=“leftpopover” data-toggle=“popover” title=“Popover Left” data-content=“Example of Popover in Left!”>Left position</button>
<button type=“button” class=“btn btn-primary” id=“toppopover” data-toggle=“popover” title=“Popover Top” data-content=“Example of Popover in Top!”>Top position</button>
<button type=“button” class=“btn btn-primary” id=“bottompopover” data-toggle=“popover” title=“Popover Bottom” data-content=“Example of Popover in Bottom!”>Bottom position</button>
<button type=“button” class=“btn btn-primary” id=“rightpopover” data-toggle=“popover” title=“Popover Right” data-content=“Example of Popover in Right!”>Right position</button>
</div>
</div>
</body>
</html>
|
As you can see, by using $(“#bottompopover”).popover({placement : ‘bottom’}); popover will not only be shown but also you can specify its position. Note that, bottompopover is the id of the button. You can replace it by any name.
Example of setting position of popover by data attribute
You can also set the popover position by using the data attribute. The data attribute is set by data-placement=”position” where the position is set to left, right, bottom, top or auto.
Experience this online
|
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
|
<!DOCTYPE html>
<html>
<head>
<title>popover example</title>
<link rel=“stylesheet” href=“//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css”>
<script src=“https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js”></script>
<script src=“http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js”></script>
<script>
$(function ()
{
$(“#leftpopover”).popover();
$(“#toppopover”).popover();
$(“#bottompopover”).popover();
$(“#rightpopover”).popover();
});
</script>
</head>
<body>
<div class=“container”>
<h1>popover Example</h1><br /><br />
<div>
<button type=“button” class=“btn btn-primary” id=“leftpopover” data-toggle=“popover” data-placement=“left” title=“Popover Left” data-content=“Example of Popover in Left!”>Left position</button>
<button type=“button” class=“btn btn-primary” id=“toppopover” data-toggle=“popover” data-placement=“top” title=“Popover Top” data-content=“Example of Popover in Top!”>Top position</button>
<button type=“button” class=“btn btn-primary” id=“bottompopover” data-toggle=“popover” data-placement=“bottom” title=“Popover Bottom” data-content=“Example of Popover in Bottom!”>Bottom position</button>
<button type=“button” class=“btn btn-primary” id=“rightpopover” data-toggle=“popover” data-placement=“right” title=“Popover Right” data-content=“Example of Popover in Right!”>Right position</button>
</div>
</div>
</body>
</html>
|
Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form
Leave A Comment?