Easy Tooltip - jQuery plugin

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

I love the simplicity of using (and more important re-using) jQuery plugins. So I decided to release yet another plugin that came from my personal need - jQuery tooltip. I already claimed this to be the simplest tooltip ever. I made some modifications to it so now has some extra features.

Download easyTooltip.zip

Overview

By default this plugin will read the title attribute of the element and convert it into fade-in tooltip that you can style any way you want. Important note, it doesn't have to be an anchor tag. You can apply this script to any element(s) you want.
The one big thing that makes this different from my first version is that you are now allowed to put custom content, any html content you want - images, long paragraphs, link lists... anything. If you hate writing HTML code inside a JavaScript variable, this plugin allows you to use inner HTML from any element on the page. It means that you can write HTML directly on the page, as you normally do, hide that element with CSS and have it appear as a tooltip on mouse over. Take a look at the demos for more info.

Options

xOffset - Offset to the left from the cursor (in pixels). Default setting is 10.
yOffset - Offset to the top from the cursor (in pixels). Default setting is 25.
tooltipId - Use this if you want to assign custom id to your tooltip. Also, if you have multiple tooltips on one page and you want to style them differently, use ID's to assing different css definitions. Default setting is "easyTooltip".
clickRemove - By default tooltip dissapears once you rool out of the element. Using this options you can remove tooltip by clicking on the element. Default setting for this option is false.
content - By default Easy Tooltip displays title attribute of an element. Use this option to send a custom content to the tooltip. Default setting for this option is "" (empty).
useElement - If you'd like to display more complex HTML in your tooltip and yet you hate writing it inside a content option, you can use a certain element's inner HTML. Best way to use this option is to create a static HTML element, hide it with css, use it's id when setting up the plugin (take a look at the 3rd demo)

Demos

Take a look at these demos and you will see how simple it is to use this plugin.

About the author:

cssglobe's image Designer, developer and a passionate standardista. Long time web professional with huge experience in all types of front-end work. Founder of Css Globe and creator of Easy front-end framework.
To get in touch, visit Alen's personal page, follow Alen on Twitter or become a Facebook friend.

Enjoyed the article?

Then don't miss our next one! Subscribe to our RSS feed or share it with your friends.

Delicious Digg StumbleUpon Reddit Subscribe to RSS Feed

Comments

fouad masoud on 5 Mar, 2009 wrote:

very nice. thank u.
Jeremy Mandle on 5 Mar, 2009 wrote:

Right on time & masterfully executed as per usual.
I've been "hacking" away at learning jQuery as of late and will put this simple, elegant tooltip plugin to use very soon. Bravo Alen!
Ed Salt on 5 Mar, 2009 wrote:

This is really elegant.

What would be perfect would be if the script could detect whether the tooltip is appearing beyond the edges of the visible window, and change the offsets accordingly ;)
Jhon Doe on 5 Mar, 2009 wrote:

good job!!
Austin Siewert on 5 Mar, 2009 wrote:

Very slick and simple. Keep up the good work!
Ozzy on 5 Mar, 2009 wrote:

Coool plugin - thanks !!!
nathanieL on 5 Mar, 2009 wrote:

Great little simple plugin.

Would just like to echo Ed Salt

"What would be perfect would be if the script could detect whether the tooltip is appearing beyond the edges of the visible window, and change the offsets accordingly"
cssglobe on 5 Mar, 2009 wrote:

Thanks! This is the first version of this plugin. For next version I will create a window dimension detector. I will also add some more stuff like URLs shown with AJAX, image previews...
Kadir GÜNAY on 5 Mar, 2009 wrote:

these tooltips are so nice! i like it :)
kk on 5 Mar, 2009 wrote:

do you ever use google before developing your plugins? theres loads of tooltip plugins for jQuery
Nick Rinylo on 6 Mar, 2009 wrote:

This Looks good, i have sen Jquery mentioned a lot, but i am not completely sure of its use or benefits? Can you enlighten me?
Hiren Modi on 6 Mar, 2009 wrote:

Just superb, Veeeery nice, Thanks.
Andrea on 6 Mar, 2009 wrote:

To be useful, should flip the position when it's too near to the window limits.
fwolf on 7 Mar, 2009 wrote:

There's still room for improvement:

In your example, you've got an DIV-container with the ID "item", which gets assigned using <code>useElement: "item"</code>
To improve the logical structure I would call it "useID" instead, because it's obviously using that and NOT an HTML element, as one would think of by reading this option name.

cu, w0lf.
Adam Fisk on 9 Mar, 2009 wrote:

Nice work Alen -- I like it a lot, and I just integrated it on the LittleShoot downloads page. Thanks.
Grayden on 9 Mar, 2009 wrote:

I have been searching the web for tooltip tutorials and this is the best by far . It is so easy to integrate with a database it makes me happy. Unfortunately I am pretty weak at JS and frameworks. I have a question about positioning the tooltip. In your tutorial the tip displays on the right side of the cursor. How would I make it display on the left?

My next question is me probably asking too much but how Could I control the tip to switch its position to the left or right side of the cursor depending on the browser window?

Thanks so much for any advice you can give me.
shpyo on 11 Mar, 2009 wrote:

This is amaizing! Thanks a lot! ;)
Alex on 12 Mar, 2009 wrote:

Hi

I really like this. But i am unable to use it for an image map especially the area tag in IE. Can you confirm if it works at your end.

Thanks
Alex
Alex on 12 Mar, 2009 wrote:

Never mind my earlier post plz. I got it wotking by updating the jquery library.
Thanks
Tom on 17 Mar, 2009 wrote:

Thanks for the great work, Alen. I'm planning on using this on my new site in place of your old easiest tooltip.

One question - can this one be used to preview an image like your old one did? I think I may be able to use the 'element' example, but couldn't figure out how to include the image source.

Any hint would be great.
Thanks again!
Martin Miranda on 18 Mar, 2009 wrote:

Cool. Thank you for these tips!
cssglobe on 18 Mar, 2009 wrote:

@Tom: You can use image source by placing target image's url into content parameter.
$("a#thumb").easyTooltip({
content: '<img src="http://mysite.com/myimage.jpg" alt="My Image" />'
});
Tom on 18 Mar, 2009 wrote:

Thanks for the tip, Alan. A quick followup question about image popups if I may:

What if there are more that one image on the page? I tried using
content: '<img src="'+this.href+'" alt="My Image" />'
but that doesn't seem to work.

Thanks again
Nick on 19 Mar, 2009 wrote:

I've added a parameter to your tooltip plugin to send a function to the tooltip content. I needed this for an event calendar page that had several tooltips with the events details in a hidden div, this way it pulls up the correct event details.

Add this line into easyTooltip.js
content = (options.func != "") ? eval(options.func)() : content;

just below the other content lines. Now you can call the tooltip like so...

$(".event-title").easyTooltip({
func: function() {return "hello world";}
})

Thanks for the great plugin!
Kris on 19 Mar, 2009 wrote:

Hello,

Please add your site at http://www.sweebs.com. Sweebs.com is a place where other people can find you among the best sites on the internet!
Its just started and we are collecting the best found on the net! We will be delighted to have you in the sweebs listings.

Regards
Kris
Matt on 19 Mar, 2009 wrote:

So...why are we still calling it CSSGlobe? I'm thinking you should change the name to jQueryGlobe by now.
I don't mean to be a smarty, but it's something you should really start to analyze.

Nice script.
Alexandre Broggio on 20 Mar, 2009 wrote:

cool
vishal on 24 Mar, 2009 wrote:

Beautiful work. I saw the demos it looks quite wonderful. It's astonishing to know how much detail one can put by using this tool on a link. And you say it's the simplest tool! ok maybe it is. congratulations!
Mike on 26 Mar, 2009 wrote:

In explorer 6 & 7 it changes the heigt of the page when you hover an element, even though the element is not near the bottom of the page. How come?
vishal on 4 Apr, 2009 wrote:

There is an issue with the last demo. I have got a vertical task bar on my screen. Thus the width of the browser is reduced to a certain extent. So when I hover the cursor over the link then the tooltip exceeds the screen size and a horizontal scroll bar is crested. But I can't move the scroll bar without removing the tooltip and if in case there is no tooltip then the scroll bar disappears. This is more like a Catch 22 situation.
mohammed on 10 Apr, 2009 wrote:

great work who have done here but is there a way to to give it a delay or stop for a few seconds ?
Odelon on 22 Apr, 2009 wrote:

Hola!!!

Muy bueno, los trucos...

:) from Perú
Paul on 22 Apr, 2009 wrote:

Great script here. Is there anyway I can make it work for an image? IE. popup when I mouseover an image instead of a link.

Thanks in advance,

Paul
Jonathan Miller on 4 May, 2009 wrote:

This is a great slider. I particularly like that is scrolls vertically. My one request is that it allow for tabbed navigation (as in not just back and next) so that your main navigation can trigger this to move to a different frame.
Richard M on 7 May, 2009 wrote:

This is fantastic, thank you for sharing... I am new to all this and was wondering if anyone was able to assist me in changing this to fade out as well as fade in and secondly to slow down the fade speed.

As I said, very new to this... Any help would be greatly aprpeciated.

Thanks again.
oakesy54 on 10 May, 2009 wrote:

Great little plugin, nice and simple. Unfortunately it does not work with area elements within an imagemap in IE. This is not due to the plugin but to do with the jquery.hover event, as the implicit over and out functions do not fire. To fix this particular bug, just take the over and out functions from the hover event and explicity create them, i.e. $(this).mouseout = function () { hover's first parameter function logic;} ;
$(this).mouseover = function() { hover's second parameter function logic };
Hope this helps anyone who wants to use this cool little plugin for IE area elements :)

Karl
Andy Barnes on 19 May, 2009 wrote:

Thanks for the great plugin! However I have slight tweak...

Under XHTML spec ID attributes should always be unique. This is easy to change within your example - just replace the anchor's id with a class and then change the initialisation to:

$("a.mylink").easyTooltip();
^ using dot instead of # still works fine

On another note I'm also experiencing an issue with (shock!) IE6 where nearby input elements appear on top of the popped up tooltip. Not sure if anyone knows a fix?

Otherwise a great and easy plugin - thank you!
asad on 1 Jun, 2009 wrote:

i need to put the tooltip on listing page where each item has its on description ... but i use this function .. its show only first item description on all listing element .. how can i change that each item shows his own description
$(document).ready(function(){
$("a").easyTooltip();
$(".product1").easyTooltip();
$(".product1").easyTooltip({
tooltipId: "easyTooltip2",
useElement: "productDesc"
});

});
Gatto on 10 Jun, 2009 wrote:

Very nice and light plugin. Don't know if it's me but I've problems using "clickRemove" if it's "true": it doesn't seem to work. Has anyone successfully used this option?
boton on 15 Jun, 2009 wrote:

Great plugin.
I have a problem updating data from ajax (including plugin content) my solution (for no append various same id):
change
$("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
for
if ($('#'+options.tooltipId).length == 0) $("body").append("<div id='"+ options.tooltipId +"'>"+ content +"</div>");
else $('#'+options.tooltipId).text(content);
kabin on 16 Jun, 2009 wrote:

thanks...

Sorry, further comments are disabled for this post.

Need help with your website?
Hire a CSS/JavaScript expert!

Hey, you are not logged in!
Apply for a membership or login here.

Want to join?

If you wish to contribute with your own articles, updates or gallery entries you can apply for a membership and even become our editor.

Apply here

Become a friend

Css Globe