Easy CSS Tooltip
If you need a really simple and basic Crossbrowser Tooltip on your website, this <1kb tooltip CSS script might be the one for you.
Here is the 4 line magic (3lines css, 1line html):
a:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px;}
a.tooltip:hover span{display:inline; position:absolute; background:#ffffff; border:1px solid #cccccc; color:#6c6c6c;}
Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.
If you want to display a tooltip for a link, just add the class "tooltip" to the link and write your Tooltip Text in a span tag within the a tag - thats it.
Demo
Easy TooltipThis is the crazy little Easy Tooltip Text..
Tested with
IE5, IE 5.5, IE 6, IE7, Safari 3.1, Latest Firefox & Opera Version.
Download this Script
Easy CSS Tooltip (690 bytes, 23.419 hits)
Willkommen! Mein Name ist Jürgen Koller, wohnhaft in Baden bei Wien. Seit 2004 bin ich als selbstständiger New Media Producer tätig. Mehr über meine Arbeiten finden Sie im 
Schalten Sie Werbung auf Kollermedia.at - über 30.000 Unique Visitors und 65.000 Pageviews pro Monat.
Verfolgen Sie die News von Kollermedia.at bequem via RSS Feed:
159 Kommentare »
9 Trackbacks
i'm sure this is all too obvious - is it possible to change the position? i.e., the "tool tip" appears on top of the selected link and not the bottom.
thanks.
mike
Very Simple, code friendly tooltip. Happy with this mate, thanks.
I tried lots of different ones and this is definitely the simplist with the smallest footprint. So simple infact, I shouldve thought of it myself!
I always like to increase my Karma whenever I use someone elses code:
@mmenger. Try adding return:false; to your link if you don't want it to reload the page.
@Larry. Try creating more than one tooltip style, eg tooltip1, tooltip2 etc.
@Mike. Positioning of the tooltip is easy, it's absolute positioned, so just use top,bottom,left and right to get it where you want it.
@Steve. "Is there any way to display a text file in the tool tip?" YES you can, stick an iframe in your span and it should work fine, no reason why it wouldnt. Probably not in IE though, youll have to test.
@krestort. you are an idiot.
@cd. IE6 is dogger isnt it. Personally, I would boot all IE6 users to the firefox homepage. Your problem could be solved by repositioning the tooltip and/or changing the z-index.
@WebDawson. Hope you don't mind me sticking my nose in. I like to earn the code I use and the backlink I get!
Cheers!
VERY NICE... I like the simple things, no much fuzz and buzz and it works (not even a js) ... WONDERFUL. Thank you
Q: I have another very nice little CSS mouseover that would dim an image. NO, it;s not with opacity setting (no WC3 validation) but the dim is achieved with using a semi-transparent. The only thing is. It makes my original image disappear. Anyone could H E L P ?
cHEErs
Awesome. Simple awesome.
"Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius -- and a lot of courage -- to move in the opposite direction."
You surely have eliminated the need for complex jquery plugins with just 4 lines of code.
nicely done. thanks!
s4e7w4 http://djg8Dnw3NxU82k0Skg.com
In IE there is a z-index issue - it's hiding behind other elements, I've tried everything to get it on top. Any ideas?
Hi,
I love this little tooltip, but am experiencing problems when I use it in (you guessed it) IE6. Instead of using text as the link, I am using an image. As I implied, in FF it works wonderfully. In IE 6 however, the "tip box" does not obey the "margin-left:8px" command on hover.
Here is the :
LINK
The tooltip is linked to the small "Information" icon (Circle I) to the right of the music player.
Another weird occurrence is that mousing over the "Buy Song" button will also bring up the tooltip, even tho it is after the closing of the tooltip!
Here is the css:
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at] */
.tooltip {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a.tooltip {border:none; text-decoration:none;}
a.tooltip img{border:none; text-decoration:none; vertical-align:middle;width:20px;height:19px;margin-left:8px;}
a.tooltip:hover {background:#ffffff; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; margin-left:8px;width:200px;text-decoration:none; vertical-align:middle;}
a.tooltip:hover span{display:inline; position:absolute;border:1px solid #cccccc; background:#f0f0f0; color:#6c6c6c; vertical-align:middle;z-index: 2;}
Here is the HTML:
Song 1: Higher Frequency. Producer:
As you can see, I have fussed with the code a it to try to correct things.
Does anyone see anything that I could do to correct this?
Thanks
Rick
Well, I can see that the HTML in the above message didn't work like I thought it would.
Just refer to the source in the actual page.
Thx.
Works great and is exactly what I was looking for (and looking for couple a of days now).
Few comments, tho:
@Big fat fan of Tshirts / mmenger:
I'm not too advanced and needed a moment to figure out the "return:false;" thing, and ended up using
@the original script:
I'm using a few different link styles in external style sheet, so instead of using:
a:hover {background:#ffffff; text-decoration:none;}
...to remove the underline, I added one line of:
a.tooltip {text-decoration:none;}
This lil script is great, great help! Thank you.
Ewww...Sorry for that, didn't notice I could use html in the message.
I meant I ended up using OnClick="return false" in my link.
How about more simpler stuff.....just use the title tag ?
Link to my website
...nice trick though!
comment4
Hi,
I am new to tooltips and trying many variations but struggling to grasp it to be honest. I have found yours the most simple to implement so thank you for that. I do have a pressing question though, how do I keep the tooltip simple to understand but enable me to produce tooltips that are not launched from links but from standard text in a page, whereby when the text is moused over, it pops up the tooltip?
Any guidance would be much appreciated in this matter.
Regards,
Rob
Tooltips are even easier than that. You don't need CSS; straight HTML will do. A tooltip appears with the title attribute in most browsers, and it's valid on any element.
Try Paragraph text
Hi Dan,
Would it be possible to somehow exchange an email about what you're saying, as I'd dearly love to get tooltips working for different areas of my site but as noted in my post above, most will be not linked tooltips and instead say a ? image and once they're hovered over it opens the tooltip.
With Easy CSS Tooltip's "Easy TooltipThis is the crazy little Easy Tooltip Text." I also would take it I can add even more in to this small snippet of code to enable me to place images etc within it also?
Not sure if I'm allowed to do this but if you could email me on robert dot stones at shopfullstop dot co dot uk (Obviously remove the dot and replace with . etc) it would be much appreciated.
Regards,
Rob
Robert,
To benefit others, I'm responding here, but will also respond by email, in case you'd like to ask more questions.
The instructions given in this tutorial allow you to add more than text. Any HTML you can stick inside a span is valid with this method.
If all you need is a plain text tooltip, title is sufficient. In other words, the example on this website (Easy TooltipThis is the crazy little Easy Tooltip Text..) could be rewritten as:
Easy Tooltip.
No CSS is needed for this to work, and it doesn't require you to use an in a non-standard way.
Obviously, that's significantly easier.
I haven't tested it on various browsers, but I believe every modern browser supports it properly.
Whoops, I didn't realize it was accepting my HTML.
Let's try this last part again.
If all you need is a plain text tooltip, title is sufficient.
In other words, the example on this website (Easy <a class="tooltip" href="#">Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.) could be rewritten as:
Easy <span title="This is the crazy little Easy Tooltip Text.">Tooltip</span>.
No CSS is needed for this to work, and it doesn't require you to use an <a> in a non-standard way.
I am seeing the same problem on IE6 as CD and the z-index does not help. Using left does not help either. The problem is that once it has popped, IE6 does not restore it to the non-hover size (although it does undisplay it). This means that the active zone for the link is now the original link plus the "span". If you have anything under that, it cannot be reached anymore. The z-index would imply setting a z-index on pop of a positive number and using a negative number when not popped. But, again, it does not restore it post hover.
As to Dan Jones, you obviously do not understand that the tooltips from titles are very limited in size and not the same across all browsers. When you do your own, you can show far more data and format it besides.
OK, I solved the problem on IE6. It must use the :hover span {} to change the link zone and so never shrinks it. So, you have to z-index on the a{} and a:hover{} so that it is above the other elements when hovering but below them otherwise.
Works on all browsers this way.
good
Nice example !!! Muchas gracias
I love this tooltip, but is there a way to include a link within the tooltip ? I modified the CSS so the tooltip appears on :active and :focus (allowing my mouse to rollover links within the tooltip) but when I clilck on them, it just makes the tooltip disappear. I would love to avoid using javascript.
Thx. for such a great code. Very simple, clear and easy to be used. Cheers!
Thank you very good css code
Hi ,
could you please tell me how to do the tooltip for dropdown by using CSS and JSP.
Thanks&Regards,
Mutyal
I have problems with webkit browsers ( chrome, safari)
It's not positioned correctly. :S
Thanx for this simple tut.. It helped me lot.
This is so easy! Love it!
I am having a prob - and after reading through all the comments, I thought I had it figured out (thanks to Big Fat Fan of T-Shirts). However, it's still giving me some issues. Any help would be appreciated.
In the gallery (www.robkazart.com), I am using the tooltip to show a larger image of the thumbnail. The images are going off the screen on the right.
I tried changing the position from absolute to left, but when I do that, the image appears at the bottom of the thumbnail and within the table (rather than hoovering over it like it does on the ones with absolute).
I tried making two styles (tooltip1, tooltip2) and that works great. Once I have this positioning thing figured out, I'll be able to use tooltip 1 on the left column of thumbnails and tooltip 2 on the right column of thumbnails to completley avoid the off-the-page thing.
Still, though, the positioning thing is making me crazy. Any ideas or suggestions?
Thanks a ton!
Having a problem in IE 8 with a div overflow: auto; The tooltips appears relative to the links position, ignoring the div height of 200px; So in return the scrolling div has tooltips that show up as if there was no height on the div. Any ideas?