Bootstrap Tooltip Plugin
The Tooltip Plugin
The Tooltip plugin is small pop-up box that appears when the user moves the mouse pointer over an element:
 |
Tip: Plugins can be included individually (using Bootstrap's individual "tooltip.js" file), or all at once (using "bootstrap.js" or "bootstrap.min.js"). |
|---|
How To Create a Tooltip
To create a tooltip, add the data-toggle="tooltip"
attribute to an element.
Use the title attribute to specify the text that should be
displayed inside the tooltip:
<a href="#" data-toggle="tooltip" title="Hooray!">Hover over me</a>
Note: Tooltips must be initialized with jQuery: select the
specified element and call the tooltip() method.
The following code will enable all tooltips in the document:
Example
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Try it Yourself »
Positioning Tooltips
By default, the tooltip will appear on top of the element.
Use the data-placement attribute to set the position of the
tooltip on top, bottom, left or the right side of the element:
Example
<a href="#" data-toggle="tooltip" data-placement="top"
title="Hooray!">Hover</a>
<a href="#" data-toggle="tooltip"
data-placement="bottom" title="Hooray!">Hover</a>
<a href="#"
data-toggle="tooltip" data-placement="left" title="Hooray!">Hover</a>
<a
href="#" data-toggle="tooltip" data-placement="right"
title="Hooray!">Hover</a>
Try it Yourself »
|
Tip: You can also use the data-placement attribute with a value of "auto", which will let the browser decide the position of the tooltip. For example, if the value is "auto left", the tooltip will display on the left side when possible, otherwise on the right. |
|---|
Complete Bootstrap Tooltip Reference
For a complete reference of all tooltip options, methods and events, go to our Bootstrap JS Tooltip Reference.