Easy Tooltip - jQuery plugin

written on:5 Mar, 2009 by Alen Grakalic

Easy Tooltip - jQuery plugin

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

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

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.

Share on Facebook Tweet this Delicious StumbleUpon Reddit Subscribe

Comments

fouad masoud 5 Mar, 2009

very nice. thank u.
Jeremy Mandle 5 Mar, 2009

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 5 Mar, 2009

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 5 Mar, 2009

good job!!
Austin Siewert 5 Mar, 2009

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

Coool plugin - thanks !!!
nathanieL 5 Mar, 2009

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 5 Mar, 2009

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 5 Mar, 2009

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

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

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 6 Mar, 2009

Just superb, Veeeery nice, Thanks.
Andrea 6 Mar, 2009

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

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 9 Mar, 2009

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

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 11 Mar, 2009

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

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 12 Mar, 2009

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

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 18 Mar, 2009

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

@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 18 Mar, 2009

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 19 Mar, 2009

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 19 Mar, 2009

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 19 Mar, 2009

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 20 Mar, 2009

cool
vishal 24 Mar, 2009

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 26 Mar, 2009

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 4 Apr, 2009

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 10 Apr, 2009

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

Hola!!!

Muy bueno, los trucos...

:) from Perú
Paul 22 Apr, 2009

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 4 May, 2009

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 7 May, 2009

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 10 May, 2009

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 19 May, 2009

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 1 Jun, 2009

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 10 Jun, 2009

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 15 Jun, 2009

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 16 Jun, 2009

thanks...

Sorry, further comments are disabled for this post.

CSS Globe is a web design magazine brought to you by Alen Grakalic and kept fresh with member contributed news and exlusive articles.

Css Globe CSS and Web Design News