Edit

Tooltips

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