A tooltip is a small pop-up box that display the link or button information when user click or place mouse pointer over that element.
Example of Code
<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>
<ul class="list-inline example-bootstrap-tooltip">
<li><a href="#" data-toggle="tooltip" class="tip-top" title="Tooltip on the top side">Tooltip on top</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-right" title="Tooltip on the right side">Tooltip on right</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-bottom" title="Tooltip the on bottom side">Tooltip on bottom</a></li>
<li><a href="#" data-toggle="tooltip" class="tip-left" title="Tooltip on the left side">Tooltip on left</a></li>
</ul>
Output
