Post
Ask Question

Create Tooltip Without Any Plugin

In this post we will discuss how we can create a tool tip by using JQuery. Here we are not going to use any plugin to create tool tip. We will use only jQuery and html table for this demo. I hope you will like this.

Background

Recently, I was going through a situation to create a tool tip for my grid. As we all know there are plenty of plugins available for the tool tip generation. But I was not ready to go with any plugin for this. So I thought of creating it manually.

Please see this article in my blog here 

Using the code

Firstly, we will create a page and an html table.

Now if you run your page and you can see the table.

Create Tooltip Without Any Plugins

Create Tooltip Without Any Plugins

Now we will add our script to the page.

  1. <script>  
  2. $(document).on('mouseover', '.table td', function () {  
  3. $(this).attr('title', $(this).text());  
  4. });  
  5. </script>  

Here what we are doing is, we are just appending the title attribute for the td element in the mouseover event. Now run your page, and see our tool tip works perfectly.

Create Tooltip Without Any Plugins

Create Tooltip Without Any Plugin

We have done it finally.

Complete Code

  1. <!DOCTYPE html>  
  2. <html>  
  3.     <head>  
  4.         <title>Create Tooltip Without Any Plugins</title>  
  5.         <script src="jquery-2.0.2.min.js"></script>  
  6.         <script>    
  7. $(document).on('mouseover', '.table td', function () {    
  8. $(this).attr('title', $(this).text());    
  9. });    
  10. </script>  
  11.     </head>  
  12.     <body>  
  13.         <table class="table" border="1" style="width: 100%">  
  14.             <tr>  
  15.                 <td>Sibi</td>  
  16.                 <td>Ajay</td>  
  17.                 <td>50</td>  
  18.             </tr>  
  19.             <tr>  
  20.                 <td>Ansu</td>  
  21.                 <td>Akhil</td>  
  22.                 <td>94</td>  
  23.             </tr>  
  24.             <tr>  
  25.                 <td>Shanto</td>  
  26.                 <td>Libin</td>  
  27.                 <td>80</td>  
  28.             </tr>  
  29.         </table>  
  30.     </body>  
  31. </html>  
Conclusion

Did I miss anything that you may think which is needed?Have you ever faced this issue in your programming life? I hope you liked this article. Please share me your valuable suggestions and feedback.

Your turn. What do you think?

A blog isn’t a blog without comments, but do try to stay on topic. If you have a questions, the please mention it in the comments section.


Similar Articles