Bootstrap Tooltips
A Tooltip is used to provide interactive textual hints to the user about the element when the user hovers over an item.
Initialization:
Bootstrap tooltips are not enabled by default. They require initialization before you can use them.
NOTE: One way to do this is to place the following code .
<script> $(function () { $('[data-toggle="tooltip"]').tooltip() }) </script>
Create tooltip:
The data-toggle=” tooltip” attribute is used to create a tooltip. The title attribute indicates the text that should be displayed inside the tooltip.
Example:
<div class="container"> <ul class="list-inline"> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" title="Default tooltip">Tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" title="Another tooltip">Another tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" title="A much longer tooltip to demonstrate the max-width .">Large tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" title="The last tip!">Last tooltip</a> </li> </ul> </div>
Script:
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
OUTPUT:
Setting the Directions of Tooltips:
Tooltips to appear on top, right, bottom and left sides of an element.
Positioning of Tooltips via Data Attributes:
Positioning of Tooltips via Data Attributes.
Example:
<div class="container"> <ul class="list-inline"> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" data-placement="top" title="Default tooltip">Tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" data-placement="right" title="Another tooltip">Another tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" data-placement="bottom" title="A much longer tooltip to demonstrate.">Large tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" data-placement="left" title="The last tip!">Last tooltip</a> </li> </ul> </div>
Script:
<script> $(document).ready(function(){ $('[data-toggle="tooltip"]').tooltip(); }); </script>
OUTPUT:
Positioning of Tooltips via JavaScript:
Set the direction of tooltips via JavaScript.
Example:
<div class="container" style="margin: 100px 60px;"> <ul class="list-inline"> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" class="tip-top" title="Default tooltip">Tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" class="tip-right" title="Another tooltip">Another tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" class="tip-bottom" title="A much longer tooltip to demonstrate.">Large tooltip</a> </li> <li class="list-inline-item"> <a href="#" data-toggle="tooltip" class="tip-left" title="The last tip!">Last tooltip</a> </li> </ul> </div>
Script:
<script> $(document).ready(function(){ $(".tip-top").tooltip({ placement : 'top' }); $(".tip-right").tooltip({ placement : 'right' }); $(".tip-bottom").tooltip({ placement : 'bottom' }); $(".tip-left").tooltip({ placement : 'left' }); }); </script>
OUTPUT: