Bootstrap ToolTip


Tooltip is a graphical user interface component. When we hover on a UI element, we get some information in a popover about that UI element that is known as a tooltip of the UI element.
Why we use a tooltip
To display some information about an element or hint or help.  
If we have a table with column names - ListItem and UserInterface. To save some real estate on the UI, we can use LI and UI as their labels but to display details, we can have tooltips on the hover. We can also use Tooltips to display more details about the action of an element.

How to create a tooltip in Bootstrap

To create a tooltip add bootstrap libraries to your code.
Add the data-toggle="tooltip" atribute to an element.
Add your description in the title atribute.
  1. <!DOCTYPE html>    
  2. <html lang="en">    
  3. <head>    
  4.   <title>Tooltip Example</title>    
  5.   <meta charset="utf-8">    
  6.   <meta name="viewport" content="width=device-width, initial-scale=1">    
  7.   <link rel="stylesheet" href="">    
  8.   <script src=""></script>    
  9.   <script src=""></script>    
  10. </head>    
  11. <body>    
  13. <div class="container">    
  14.  <table class="table table-striped">    
  15. <thead>    
  16. <tr>    
  17. <th>Sl.No</th>    
  18. <th>Car Name</th>    
  19. <tr>    
  20. </thead>    
  21. <tbody id="tblCarLists"><tbody>    
  22. </table>    
  24. </div>    
  26. <script>    
  27. $(document).ready(function(){    
  28. var car=["Bmw","Maruti","Jaguar"]    
  29. for(i=0;i<car.length;i++){    
  30. var html="<tr><td data-toggle='tooltip' title="+Number(1+i)+">"+Number(1+i)+"</td><td data-toggle='tooltip' title="+car[i]+">"+car[i]+"</td></tr>";    
  31. $("#tblCarLists").append(html);    
  32. }    
  34.   $('[data-toggle="tooltip"]').tooltip();       
  35. });    
  36. </script>    
  38. </body>    
  39. </html>    
In the above code, I've used tooltip in a <td> element. When an user will hover on a <td> element, user will get the information about that <td> on a popup.

How to change a tooltip position 

By default, tooltip appears on the top of the element. To change the tooltip position we use data-placement attribute.
  1. <td data-toggle='tooltip data-placement="top"' title="+Number(1+i)+">"+Number(1+i)+"</td>        
  2. <td data-toggle='tooltip' data-placement="bottom" title="+Number(1+i)+">"+Number(1+i)+"</td>        
  3. <td data-toggle='tooltip' data-placement="left"  title="+Number(1+i)+">"+Number(1+i)+"</td>        
  4. <td data-toggle='tooltip' data-placement="right" title="+Number(1+i)+">"+Number(1+i)+"</td>                        
In this blog, we discussed how to create a tooltip using jQuery .

Next Recommended Reading Bootstrap Modal Popup Video