Post
Ask Question

Simply Tooltip Using jQuery And Bootstrap

Introduction

 
Here we will see different ways to set up Tooltip for our daily use. As we know, tooltip is a really really useful Web feature which helps us to show help text or key information to users interacting with our site.
 
The simple definition of Tooltip is that It could be text or an image or something else which appears when you move your mouse cursor over html elements, images, hyperlinks/ anchors, or something else which makes up the graphical user interface (GUI). 
 
I am going to show you different ways to show Tooltip. 
  • Using jQuery
  • Using Bootstrap
Using jQuery
 
Below are the files we need to include in our page to make jQuery Tooltip work.
  1. <script src="https://code.jquery.com/jquery-3.5.1.min.js"  
  2.         integrity="sha256-9/aliU8dGd2tb6OSsuzixeV4y/faTqgFtohetphbbj0="  
  3.         crossorigin="anonymous"></script>  
  4.   
  5. <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"  
  6.         integrity="sha256-VazP97ZCwtekAsvgPBSUwPFKdrwD3unUfSGVYrahUqU="  
  7.         crossorigin="anonymous"></script>  
  8.   
  9. <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">  
HTML
  1. <p>  
  2.     <a href="#" id="ancTag" title="Hi I am tooltip on Anchor">Tool Tip on Anchor Tag</a>  
  3. </p>  
  4. <p>  
  5. <p>  
  6.     <label>Your Age:</label>  
  7.     <input id="txtAge" title="The age should be above 18">  
  8. </p>  
  9. <div title="I am a tooltip of Div" style="border:solid 1px #ddd;background-color:#eee;display:inline-block;padding:5px;">  
  10.     Hey I am Div  
  11. </div>  
Script
  1. <script type="text/javascript">
  2. $(document).ready(function(){
  3.    $(document).tooltip();
  4. });
  5. </script>
Here it will apply Tooltip on the whole document for all the tags which have attribute title.
 
We can also apply Tooltip specifically to the tag by using element id like below, not the whole document.
  1. <script type="text/javascript">  
  2.     $(document).ready(function () {  
  3.         $("#txtAge").tooltip();  
  4.         $("#ancTag").tooltip();  
  5.         $("#div").tooltip();  
  6.     });  
  7. </script>  
Screen
 
  
Note: Here it directly uses the title attribute from our HTML tag to get the text to show as a Tooltip
 
Other options we will learn with the jQuery Tooltip:
  • content
  • track
  • disabled 
  • position 
If we want to set tooltip text dynamically we can use the content option like below with other options above.
  1. <script>  
  2.     $(function () {  
  3.         $("#txtAge").tooltip({  
  4.             content: "<strong>I am from script</strong>",  
  5.             track: true  
  6.         }),  
  7.             $("#div").tooltip({  
  8.                 disabled: true  
  9.             });  
  10.     });  
  11. </script>  
Here we are setting tooltip text from script with track: true, which means it will follow the mouse to show tooltip position.
 
To disable the tooltip we can use disabled: true property.
 
To set the tooltip position we can use position attributes like below.
  1. <script>  
  2.          $(function() {  
  3.             $( "#ancTag" ).tooltip({  
  4.                position: {  
  5.                   my: "center bottom",  
  6.                   at: "center top-10",  
  7.                   collision: "none"  
  8.                }  
  9.             });  
  10.          });  
  11.       </script>  
Tooltip will appear based on the position properties setup like above.
 
Using Bootstrap
 
Below are the files we need to include in our page to make a Bootstrap Tooltip work.
  1. <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">  
  2. <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>  
  3. <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>  
Scripts
  1. <script>  
  2. $(document).ready(function(){  
  3.   $('[data-toggle="tooltip"]').tooltip();  
  4. });  
  5. </script>  
NoteI will apply Tooltip setup wherever it finds data-toggle attributes in the page.
 
HTML
  1. <div class="container">  
  2.     <h2>Bootstrap Tooltip Example</h2>  
  3.     <br>  
  4.     <ul class="list-inline">  
  5.         <li><button class="btn btn-primary" data-toggle="tooltip" data-placement="top" title="Hello I am on Top">Sample Data - Top</button></li>  
  6.         <li><button class="btn btn-info" data-toggle="tooltip" data-placement="bottom" title="Hello I am on Bottom">Sample Data - Bottom</button></li>  
  7.     </ul>  
  8.     <ul class="list-inline">  
  9.         <li><button class="btn btn-primary" data-toggle="tooltip" data-placement="left" title="Hello I am on Left">Sample Data - Left</button></li>  
  10.         <li><button class="btn btn-info" data-toggle="tooltip" data-placement="right" title="Hello I am on Right">Sample Data - Right</button></li>  
  11.   
  12.     </ul>  
  13.     <ul class="list-inline">  
  14.   
  15.         <li><button class="btn btn-primary" data-toggle="tooltip" title="Hello I am on Default Top">Sample Data (No Placement)</button></li>  
  16.     </ul>  
  17.     <br>  
  18.     <p>So he we use data-placement attribute setup the tooltip position.</p>  
  19. </div>  
Note
So here it first checks the attribute named data-toggle='tooltip' present in any tag and then uses the title attribute to get the text to show as a Tooltip.
 
For a feature for placement (where you want to show the Tooltip) we need to use another attribute named data-placement and its value could be any one from the below list.
  • top (data-placement="top" - so it will show Tooltip on top side of element) 
  • bottom (data-placement="bottom" - so it will show Tooltip on bottom side of element)
  • left (data-placement="left" - so it will show Tooltip on left side of element)
  • right (data-placement="right" - so it will show Tooltip on right side of element)
Note
Top is default if you do not supply anything - data-placement attribute is optional
 

Screens

 
(Top & Bottom Placement) 
 
 
 
(Left & Right Placement) 
 
 
 
(Default Placement which is Top) 
 
 
 
Other options
 
We can control specific Tooltip configuration as below.
  1. // Select a specified element id or class name  
  2. $('#elementid').tooltip();  
We can customize the look of Tooltip with the help of below classes in css
  1. <style>  
  2.  /* Main Tooltip Css Class */  
  3.  .test + .tooltip > .tooltip-inner {  
  4.    background-color: #666;   
  5.    color: #FFFFFF;   
  6.    border: 1px solid #666;   
  7.    padding: 5px;  
  8.  }  
  9.    
  10.  /* Placement specific Classes */  
  11.  /* Placement top */  
  12.  .test + .tooltip.top > .tooltip-arrow {  
  13.    border-top: 5px solid #666;  
  14.  }  
  15.    
  16.  /* Placement bottom */  
  17.  .test + .tooltip.bottom > .tooltip-arrow {  
  18.    border-bottom: 5px solid #666;  
  19.  }  
  20.    
  21.  /* Placement left */  
  22.  .test + .tooltip.left > .tooltip-arrow {  
  23.    border-left: 5px solid #666;  
  24.  }  
  25.    
  26.  /* Placement right */  
  27.  .test + .tooltip.right > .tooltip-arrow {  
  28.    border-right: 5px solid #666;  
  29.  }  
  30.  </style>  
We can also show and hide Tooltip on click event as below.
  1. $(".btn1").click(function(){  
  2.    $("[data-toggle='tooltip']").tooltip('show');  
  3.  });  
  4.  $(".btn2").click(function(){  
  5.    $("[data-toggle='tooltip']").tooltip('hide');  
  6.  });  
Here I have tried to show the basic options which we can use from jQuery and Bootstrap to manage Tooltip easily.
 
There are other properties available to handle some kind of events with jQuery and Bootstrap Tooltip configuration. 
 
I hope you like this article.
 
Many thanks for reading!!  


Similar Articles