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

Learn how to build modern digital experience apps with Crafter CMS. Download this eBook now. Brought to you in partnership with Crafter Software

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.

Crafter is a modern CMS platform for building modern websites and content-rich digital experiences. Download this eBook now. Brought to you in partnership with Crafter Software.

Topics:
html ,jquery

Published at DZone with permission of Sibeesh Venu, DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

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

{{ parent.tldr }}

{{ parent.urlSource.name }}