Over a million developers have joined DZone.
{{announcement.body}}
{{announcement.title}}

Creating Tooltips in jQuery (Without Plugins!)

DZone's Guide to

Creating Tooltips in jQuery (Without Plugins!)

jQuery can display a tooltip with the attributes of an element on a mouseover.

· Web Dev Zone ·
Free Resource

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

In this post, we will discuss how we can create a tooltip using jQuery and HTML, but not plugins, for a lighter approach.

Background

Recently, I was going through a situation to create a tooltip for my grid. As we all know, there are plenty of plugins available for tooltip generation. But I wanted to create them manually.

Using the Code

First of all, we will create a page and an 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 you can see the table. Now, 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 appending the title attribute for the <td>  element in the mouseover event. 

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 is needed? Have you ever faced this issue in your programming life? I hope you liked this article. Please share 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.

Deploy code to production now. Release to users when ready. Learn how to separate code deployment from user-facing feature releases with LaunchDarkly.

Topics:
html ,jquery

Published at DZone with permission of

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}