Simple jQuery Tooltip

I love jQuery and I am really thankful to its authors and contributors. It's an awesome tool. I did want to make a simple tooltip with jQuery for input elements. I've thought around 20 seconds to how to do it and found my solution.

So what I needed was an element loop, mouseover and mouseout functions, positioning elements, giving some id to tooltip divs and that's all.

First, I have created the html elements.

<p><label for="name">Name:</label><input type="text" name="name" /></p>
<p><label for="email">E-Mail:</label><input type="text" name="email" /></p>

<div class="info" id="info_1">Enter your first and last name. You will known on the website with this name.</div>
<div class="info" id="info_2">Enter your email address. E-mail will be used for logging in.</div>

And then I have written the jQuery part:

$(document).ready(function(){
    $("input").each(function(i) {
        $(this).mouseover(function(){
            var offset = $(this).offset();
            $("#info_"+(i+1)).css({'left':offset.left+10, 'top':offset.top+30, 'position':'absolute', 'display':'block'});
        });
        $(this).mouseout(function(){
           $("#info_"+(i+1)).css({'display': 'none'});
        });
    });
});

So what I have done simply on the jQuery part is:

• I have used all the input items in a loop.
• I have added mouseover and mouseout functions to the input elements.
• I have changed their positioning.

And that's all. Very simple. :) Click to check to demo.