Post
Ask Question

Bootstrap ToolTip

Introduction

 
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.  
 
Example
 
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="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">    
  8.   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>    
  9.   <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>    
  10. </head>    
  11. <body>    
  12.     
  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>    
  23.      
  24. </div>    
  25.     
  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. }    
  33.     
  34.   $('[data-toggle="tooltip"]').tooltip();       
  35. });    
  36. </script>    
  37.     
  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.
 
Example:    
  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>                        
Summary 
In this blog, we discussed how to create a tooltip using jQuery .