Simple jQuery Tooltip
2010-01-12 05:19:43 | 0 Comment
I love [jQuery](http://www.mengu.net/tag/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.
Enter your first and last name. You will known on the website with this name.
Enter your email address. E-mail will be used for logging in.
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](http://www.mengu.net/repo/tooltip.html).
Check my latest project compector.com where you can post references about your former employers and see what others have said about the future employers. Sign up now and post a reference and share it on twitter or facebook.
Comments
Leave a Response