A Bootstrap tooltip is a small floating message that appears when the mouse is hovered over a component.
Bootstrap's tooltip is made using CSS and triggered through JavaScript.
To use a tooltip, we have to define some custom data-* attributes.
The data-placement attribute accepts one
of the following four values: top, bottom, left, and right.
The data-placement attribute defines
the position of the tooltip with respect to
its parent component.
<!DOCTYPE html>
<html lang="en">
<head>
<script type='text/javascript'
src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet"
href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script
src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script
src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www. j av a 2 s . c om-->
$('.tooltipButton').tooltip();
});
</script>
</head>
<body style='margin:30px'>
<button type="button"
class="btn btn-default tooltipButton"
data-toggle="tooltip"
data-placement="bottom"
title="I am a Bootstrap button">Who am I?</button>
</body>
</html>We can set tooltips to appear on top, right, bottom and left sides of an element.
The following example shows how to set the direction of tooltips via data attributes.
<!--from w w w. j a v a 2s . c om-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-placement="top" data-original-title="Default tooltip">Tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="right" data-original-title="Another tooltip">Another tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="bottom" data-original-title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-placement="left" data-original-title="The last tip!">Last tooltip</a></li>
</ul>
</div>
</body>
</html>The following example shows how to set the direction of tooltips via JavaScript.
<!-- w w w .j ava 2s. c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$(".tip-top").tooltip({
placement : 'top'
});
$(".tip-right").tooltip({
placement : 'right'
});
$(".tip-bottom").tooltip({
placement : 'bottom'
});
$(".tip-left").tooltip({
placement : 'left'
});
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" class="tip-top" data-original-title="Tooltip on top">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-right" data-original-title="Tooltip on right">Tooltip on right</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-bottom" data-original-title="Tooltip on bottom">Tooltip on bottom</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-left" data-original-title="Tooltip on left">Tooltip on left</a></li>
</ul>
</div>
</body>
</html>The following table lists the options for tooltip.
| Name | Type | Default Value | Description |
|---|---|---|---|
| animation | boolean | true | Apply a CSS fade transition to the tooltip. |
| html | boolean | false | Insert html into the tooltip.
If false, jQuery's text() method will be used. |
| placement | string | function | 'top' | Sets the position of the tooltip - top | bottom | left | right | auto. |
| selector | string | false | If a selector is provided, tooltip objects will be attached to the specified targets. |
| title | string | function | '' | Sets the default title value if title attribute isn't present. |
| trigger | string | 'hover focus' | Specify how tooltip is triggered - click | hover | focus | manual. |
| delay | number | object | 0 | Time to delay in showing and hiding the tooltip in ms. |
| container | string | false | false | Appends the tooltip to a specific element container: 'body' |
| template | string | '<div class='tooltip' role='tooltip'><div class='tooltip-arrow'></div><div class='tooltip-inner'></div></div>' |
HTML to use when creating the tooltip. |
| viewport | string | object | { selector: 'body', padding: 0 } |
Keeps the tooltip within the bounds of this element. |
This method attaches the tooltip handler to a group of elements.
<!-- w ww . j av a 2 s .c o m-->
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#myTooltip").tooltip({
title : 'title attribute.'
});
});
</script>
<style type="text/css">
.bs-example{
margin: 100px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>
<a href="#" data-toggle="tooltip" id="myTooltip">Tooltip Example</a>
</p>
</div>
</body>
</html>The following code shows how to use the following methods.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!-- w w w. jav a2s. c o m-->
$(".show-tooltip").click(function(){
$("#myTooltip").tooltip('show');
});
$(".hide-tooltip").click(function(){
$("#myTooltip").tooltip('hide');
});
$(".toggle-tooltip").click(function(){
$("#myTooltip").tooltip('toggle');
});
$(".destroy-tooltip").click(function(){
$("#myTooltip").tooltip('destroy');
});
});
</script>
<style type="text/css">
.bs-example{
margin: 60px;
}
</style>
</head>
<body>
<div class="bs-example">
<p>
<a href="#" data-toggle="tooltip" id="myTooltip" title="This is default title">Tooltip Example</a>
</p>
<div>
<p>Click on the following buttons to control the tooltip manually.</p>
<input type="button" class="btn btn-primary show-tooltip" value="Show">
<input type="button" class="btn btn-warning hide-tooltip" value="Hide">
<input type="button" class="btn btn-success toggle-tooltip" value="Toogle">
<input type="button" class="btn btn-danger destroy-tooltip" value="Destroy">
</div>
</div>
</body>
</html>We can use the following events with tooltip.
| Event | Description |
|---|---|
| show.bs.tooltip | fires immediately when the show instance method is called. |
| shown.bs.tooltip | fired when the tooltip has been made visible to the user. It will wait until the CSS transition process has been fully completed. |
| hide.bs.tooltip | fired immediately when the hide instance method has been called. |
| hidden.bs.tooltip | fired when the tooltip has finished being hidden from the user. It will wait until the CSS transition process has been fully completed. |
The following example displays a log message when fade out transition of the tooltip has been fully completed.
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){<!--from www . j a v a 2 s . co m-->
// Initialize tooltip
$('[data-toggle="tooltip"]').tooltip({
placement : 'top'
});
// Fire tooltip event
$('[data-toggle="tooltip"]').on('hidden.bs.tooltip', function(){
console.log("Tooltip has been completely closed.");
});
});
</script>
<style type="text/css">
.bs-example{
margin: 100px 50px;
}
</style>
</head>
<body>
<div class="bs-example">
<ul class="list-inline">
<li><a href="#" data-toggle="tooltip" data-original-title="Default tooltip">Tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="Another tooltip">Another tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="A much longer tooltip to demonstrate the max-width of the Bootstrp tooltip.">Large tooltip</a></li>
<li><a href="#" data-toggle="tooltip" data-original-title="The last tip!">Last tooltip</a></li>
</ul>
</div>
</body>
</html>