Create Tooltip Without Any Plugins

Sibeesh Passion

4.41/5 (5 votes)

29 Sep 2015CPOL2 min read

5.1K

In this post we will discuss how we can create a tool tip by using JQuery.Here we are not going to use any plugins to create the 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 […]

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 are available for the tool tip generation. But I was not ready to go with any plugins for this. So I thought of creating it manually. You might be think this could be done by adding the title attribute to the elements directly, but I had a different situation. I was using a third tool, in which I was forced to include an additional js file, I was not ready to do that. Adding any unwanted js file to your project is a bad habit. So I thought of creating tool tip in the custom way.

Using the code

First of all we will create a page and a html table.

<!DOCTYPE html>
<html>
<head>
    <title>Create Tooltip Without Any Plugins</title>
    <script src="jquery-2.0.2.min.js"></script>
</head>
<body>
    <table class="table" border="1" style="width: 100%">
        <tr>
            <td>Sibi</td>
            <td>Ajay</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Ansu</td>
            <td>Akhil</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Shanto</td>
            <td>Libin</td>
            <td>80</td>
        </tr>
    </table>
</body>
</html>

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

Create Tooltip Without Any Plugins

No we will add our script to the page.

<script>
       $(document).on('mouseover', '.table td', function () {
           $(this).attr('title', $(this).text());
       });
   </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

We have done it finally.

Complete Code

<!DOCTYPE html>
<html>
<head>
    <title>Create Tooltip Without Any Plugins</title>
    <script src="jquery-2.0.2.min.js"></script>
    <script>
        $(document).on('mouseover', '.table td', function () {
            $(this).attr('title', $(this).text());
        });
    </script>
</head>
<body>
    <table class="table" border="1" style="width: 100%">
        <tr>
            <td>Sibi</td>
            <td>Ajay</td>
            <td>50</td>
        </tr>
        <tr>
            <td>Ansu</td>
            <td>Akhil</td>
            <td>94</td>
        </tr>
        <tr>
            <td>Shanto</td>
            <td>Libin</td>
            <td>80</td>
        </tr>
    </table>
</body>
</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 question unrelated to this post, you’re better off posting it on C# Corner, Code Project, Stack Overflow, Asp.Net Forum instead of commenting here. Tweet or email me a link to your question there and I’ll definitely try to help if I am able to.

Kindest Regards
Sibeesh Venu

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)