Quick Reach
Bootstrap Tooltip
Creating Tooltips as the mouse hovers over the links, buttons etc. is quite easy and nicely styled in Bootstrap. In this tutorial, we will show you how to create nice tooltips in buttons and links using the Bootstrap Framework with examples that can be seen online.
By default, the tooltips are shown on the top as mouse hovers over an element. Using the Bootstrap, you can set its direction to the top, left, right or bottom as well. You have to give a title attribute in the tooltip of bootstrap, for the text to be shown as mouse gets over the element.
A few quick Tooltip examples
Tooltip in all positions example
Example of tooltip on the top
Following example shows tooltip as mouse hovers over the button. The tooltip will be shown on top of the button.
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
|
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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(){
$(".btn").tooltip({
placement : 'top'
});
});
</script>
</head>
<body>
<div>
<h1>Bootstrap Tooltip Example</h1><br /><br />
<div>
<button type="button" title="Example tooltip on top">Tooltip on top</button>
</div>
</div>
</body>
</html>
|
The tooltip is shown by using the jQuery as you can see in the <head> tag.
Example of tooltip in all directions
Following example shows tooltip in bootstrap to the left, right, top and bottom that are handled in jQuery.
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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
|
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/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(){
$("#btntop").tooltip({
placement : 'top'
});
$("#btnleft").tooltip({
placement : 'left'
});
$("#btnright").tooltip({
placement : 'right'
});
$("#btnbottom").tooltip({
placement : 'bottom'
});
});
</script>
</head>
<body>
<div>
<h1>Tooltip Example</h1><br /><br />
<div>
<button type="button" id="btnleft" class="btn btn-default" title="Tooltip on left">Tooltip on left</button>
<button type="button" id="btntop" class="btn btn-default" title="Tooltip on top">Tooltip on top</button>
<button type="button" id="btnbottom" class="btn btn-default" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" id="btnright" class="btn btn-default" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
</body>
</html>
|
Example of Tooltip by data attribute
The following example shows bootstrap tooltip by using the data attribute, unlike above examples where we used jQuery. In that case, unlike other plugins used in Bootstrap you have to activate the tooltip plugin as follows:
<script>
$(function () { $(“[data-toggle=’tooltip’]”).tooltip(); });
</script>
Following example first activates the tooltip plugin and then the tooltips are shown by using the data attributes.
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
|
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</head>
<body>
<div>
<h1>Tooltip Example</h1><br /><br />
<div>
<button type="button" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on left</button>
<button type="button" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on top</button>
<button type="button" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on bottom</button>
<button type="button" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on right</button>
</div>
</div>
</body>
</html>
|
Tooltip example in links
The following example gives an idea how to use tooltip in the anchor text. You still have to activate the plug-in, as shown in above example. Otherwise, an ordinary tooltip will be shown.
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
|
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
<script>
$(function () { $("[data-toggle='tooltip']").tooltip(); });
</script>
</head>
<body>
<div>
<h1>Tooltip Example</h1><br /><br />
<div>
<a href="#" data-toggle="tooltip" title="Tooltip on left">Default Tooltip</a><br />
<a href="#" data-toggle="tooltip" data-placement="left" title="Tooltip on left">Tooltip on Left</a><br />
<a href="#" data-toggle="tooltip" data-placement="top" title="Tooltip on top">Tooltip on Top</a><br />
<a href="#" data-toggle="tooltip" data-placement="bottom" title="Tooltip on bottom">Tooltip on Bottom</a><br />
<a href="#" data-toggle="tooltip" data-placement="right" title="Tooltip on right">Tooltip on Right</a><br />
</div>
</div>
</body>
</html>
|
Tooltip with HTML example
The following example shows how to create Bootstrap Tooltips with HTML inside it. For illustration purpose, we have included an h1 heading, a link and an image inside the tooltip. In order to use Tooltip inside the <a> tag with HTML you have to use this: data-html=”true”. See following example..
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
|
<!DOCTYPE html>
<html>
<head>
<title>Tooltip example</title>
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.0.3/js/bootstrap.min.js"></script>
</head>
<body>
<div>
<h1>Bootstrap Tooltip Example</h1><br /><br /><br /><br />
<div>
<div>
This is Tooltip example with HTML inside it.
A <a title="<h1>This is HTML h1</h1> <a href='#'>this is link inside tooltip</a> <img src='TC_logo.png' width='175'>" data-html="true" rel="tooltip" href="#">Bring mouse and experience HTML tooltip that contains heading, link and image</a>.
</div>
<script type="text/javascript">
$('.tooltip-demo.well').tooltip({
selector: "a[rel=tooltip]"
})
</script>
</div>
</div>
</body>
</html>
|
Also see Twitter Bootstrap | Bootstrap Table | Bootstrap Form
Leave A Comment?