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
It's fantastic spent 2 days fumbling with other "simple" apps...any way to disable the actual link so the page won't reload if they click?
Michael
Great Tooltip!
I have six icons (3 columns, 2 rows) that are very close to each other. I would like to display a separate tooltip for each. Is there a way to position the tooltips so only one shows and doesn't overlap the others?
Here's what I would like to do:
Top Row
1st Icon - Upper left tooltip
2nd Icon - Top center tooltip
3rd Icon - Top Right tooltip
Bottom Row
1st Icon - Lower Left tooltip
2nd Icon - Bottom center tooltip
3rd icon - Lower right tooltip
Can someone help?
thank you so much for this script. i never comment on sites, but this is something i have been looking around forever for and felt you deserved the kudos. All the scripts i have found are filled with a lot of things you don't need and actually just end up ruining the code.
Is there any way to display a text file in the tool tip?
No its just a css tooltip - if you want to display an external txt file you need a Ajax Tooltip.
I'm new to webdesign (1 month and counting) and this is perfect for me! easy to figure out and implement. although i am having problems viewing it in IE6. might be b/c i've added a background image to the tooltip? works perfect in MF though! Thanks alot!
very powerfull, I use it with asp.net, so if I Select sth. like
SELECT ID, '' + cast(ID as varchar(32)) + '' + Title +'' as Text, Title FROM myTable
I have a database depending Tooltip just by binding "text" to any control!
There is a problem with the z-index i guess, it's always on the top and didn't show any interest on added z-index:xx css tags.
Gracias por el script, un saludo desde Nicaragua
Hi! zetia
Hey,
My links are within cells of a dynamically created tabled.
In IE the tooltips are appearing behind the cells which follow.
Any ideas?
mh you can try to give the "a.tooltip:hover span" class a z-index
Hey,
Thanks for the reply I got it working by adding the z-index to the a and the span css.
Perfect
http://www.hawaii-aloha.com/index1.html this code of tooltip does not work for me.
please see "Find hotels that match your price range" just on the map
please give me some code or if possible let me know whats wong.
Thanks
I'm trying to figure out how to use this with Windows Live Writer- can you help?
Wow! Thanks so much. Spent all day looking for a Javascript solution and then bump into your site which has it solved with a couple of lines of CSS. Simplicity rules!
Great code!! So much easier than Javascript solutions. The only thing I wish for is it could do position so it's not using inline. I rather have it next to the word rather than at the end of it. Any ideas?
Simply GREAT!
I am sooo going to use this on my site.
Recently one of my friends started an obsession with the actor Nicholas Cage (mostly because their names are both Nicholas - sounds strange but he is strange and that isn't the point). After asking around the rest of my friends he seems to be a very controversial figure.
What does the forum think? do you love the all action superhero? Or do you hate the droning voice of the man who does nothing but action shooters?
thank you so much for this script.
Great!
Using it on my site.
Mike
Thanks! It is very easy, and no js!
First, is you can incorporate javascript into the css by using the DOM.
document.getElementById("tooltip1").innerHTML="This is tooltip1"
ex. Hover me
Using this method, you can hover blocks of text, images, buttons, etc.
Still very simple, but more versatile.
Second, you can have it position how you want to by adding stuff to the style, like block instead of inline for the display and also set the start points within the css.
One problem that is always apparent is that you can end up running off the sides of the page if you use absolute positioning. I am still trying to find a way to use the mouse position to adjust the top left corner during absolute postitioning.
Oh, it didnt show my html! so much for the example.
Thanks
Kral Fm
KralFm
I realize this post isn't brand-new but just wanted to say...
Great elegant CSS solution! I will definitely use this on future projects.
That said, this doesn't work on floated elements.
Hi Jurgen,
Thanks for this tip. I used it in my laboratory's site earlier this year and it worked great.
But for some reason it now doesn't work in IE and Chrome (fine in Opera, FireFox and Safari - weird).
I was hoping you might have some ideas why this might be. The page is here: http://www.putslab.psu.edu/research.html The tooltip appears to the right of the graphs.
The CSS is here: http://www.putslab.psu.edu/putsstyle.css with the Tooltip code at the very bottom.
Thanks again,
Rob
http://chinatrip.net.ru china trip China beauty