How To Create Tooltips Using Bootstrap

First, it is essential to know what  ToolTip is:

A Tooltip is a tiny popup which appears when user places the mouse pointer over an element, say something like buttons, links or on text etc.

Tooltips are very useful for new users of our websites, since they enable the user to know the purpose of buttons and links by placing the mouse pointer over them.


  1. <script type="text/javascript">  
  2.     $(document).ready(function() {  
  3.         $('[data-toggle="tooltip"]').tooltip({  
  4.             placement: 'top'  
  5.         });  
  6.     });  
  7. </script>   


  1. <style type="text/css">  
  2.     .bs-example {  
  3.         margin: 100px 50px;  
  4.     }  
  5. </style>   

To Use Tooltip and popovers we must initialize them ourselves


There are few options which can be passed to tooltip() bootstrap method to customize the functionality of tooltip


It sets the position of tooltip-top,bottom,left,right.


Sets the default title if its title attribute is not present.


Shows how tooltips are triggered