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.278 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 thought that was how it was done, but it doesn't seem to work for me. Not sure why. I am filling the tooltip with content generated by PHP. Is it possible to put a hyperlink in the tooltip? When I try, it displays the hyperlinks under the link image, instead of in the tooltip pop up.
With respect and by your leave.
If you speak german you find a good tut here:
http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html
(code is given anyway)
A hyperlink within a hyperlink is not allowed but as you will see, you can generate a tooltip for any element, e.g. a span element.
In this case a hyperlink will be allowed.
Cheers,
noRiddle
how can i make it sticky and put a link on the tooltip?
What means sticky ?
Stick to what ?
As to the hyperlink:
If you use a span element as the containing element and, e.g. an em element for the tooltip, you can also put a link in there.
Have a look at the examples on the before mentioned page.
Even if you don't speak german, you'll understand the show cases and the source code..., I hope...
noRiddle
Google Chrome did a nice job of translating the page, so I think I can find what I need there. Thanks!!
You are welcome.
Just saw, that google translator partly destroys the CSS, which results in strange behaviour and the tooltips not showing up properly. Also the bubbles with the original text cover the tooltips in some places, well...
If you have any specific questions, don't hesitate to ask.
Cheers,
noRiddle
Great tip and the fact that it is only 4 lines of code is even better. However with this script where I am trying to use it the tooltips are sometimes partially covered by another item on the page, is there a way of positioning them?
Tested in the latest main browsers and works in the following
IE9
Opera 11.50
Safari 5.0.4
Google Chrome 13.0.782.107 m
Firefox 5.0
Great tip, thanks
The following has css has a couple of additions to it to make it come to the front instead of hiding behind something else on your page. I have made a few other little tweaks that make the tooltip a little easier to see, you may not like the colour scheme but that is easy to change.
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at] */
* {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:12px;
}
a:hover {
background:#ffffff;
text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {
display:none;
padding:5px 5px 5px 5px; /* original is 3px 3px; */
margin-left:10px;
margin-top:30px;
margin-right:10px;
width:150px; /* change this if required, width of tooltip pane */
}
a.tooltip:hover span{
display:inline;
position:absolute;
border:3px solid #FF0;
background:#3CF;
color:#000;
-moz-box-shadow: 0 12px 12px 12px #ccc;
-webkit-box-shadow: 0 8px 8px #ccc;
box-shadow: 0 12px 12px 12px #ccc;
z-index:100; /* brings tooltip to front 100 being highest.
if you have zindex on anything else set to 100 reduce it to 98 or something
this will make sure the tooltip stays at the front of the screen */
}
@Dave:
Because of a stacking-context bug in IE7 you should put the z-index already on the a:hover and not on the a:hover span.
In your example the appearing tooltip would be covered by a tooltip containing text right or below of the first one in IE7.
Btw.: Why does everybody use so high z-indexes, there is no reason for that, it is only showing that the stacking-context rules are not understood.
Unless there is other z-indexes used on the page a z-index of 1 is absolutely sufficient and even in the first case the necessity of a z-index of 100 is very unlikely.
No offence meant,
noRiddle
With Google Chrome translating pages works great, that's why I believve I found what I need. Thanks a lot.
I am a wed designer i need more creative if you can provide it in your post it will be good but this is also great collection
hi ,
that pretty nice and so simple as I want.
is that possible to have two floating type? I use it for thumbnail list and I want to show on the left side only for thumbnails which are on right side.
basically, like activede.net . home page "New Items" .. have a check thumbnails and tooltips.
thank you.
Good Morning
I've added your CSS Tooltip to a site I am building, http://bamboo1.midae.co.uk - temporary address whilst in construction and the actual "box" appears quite far to the right, I'd like for it to appear over the actual image where the cursor is..
I look forward in your response.
Justin
@Justin
You gave the a.tooltip:hover span a display:inline;
What do you expect ?
Try a position:absolute; bottom:110%;
or more, as to your needs.
No display:inline;
With display:inline; the tooltip will display inline, meaning, right of the outgoing element with the respective margin of 8px which you assigned.
Cheers,
noRiddle
@noRiddle
The script you see on the site is the one that I downloaded this morning, this has nothing to do with me.
Can you be more specifc on what needs to be done..
Here's my script can you edit it and then I can see what your talking about..
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at] */
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a:hover {background:#000000; 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; bottom:110%; border:2px solid #cccccc; background:#000000; color:#ffffff;}
Thanks
@noRiddle
That doesn't work
If you want the tooltip to be displayed above the containing element:
* {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
a:hover {background:#000000; text-decoration:none;} /*BG color is a must for IE6*/
a.tooltip span {display:none; padding:2px 3px; width:130px;}
a.tooltip:hover span{display:block;position:absolute; bottom:110%; border:2px solid #cccccc; background:#000000; color:#ffffff;}
The width, paddings, colors and background-colors are up to you.
noRiddle
P.S.
You can also have a look at my demonstrations here (german language but understandable because of examples and code)
http://hypertext-talk.de/skins/revilo_style/post_assets/css_tooltips/index.html
not working
If you want help, we can't communicate with code fragments.
Do you have a page to show what you want to achieve ?
How ist the HTML ?
noRiddle
See here: http://bamboo1.midae.co.uk/ the tooltip box appears over the next image, I need it to appear above the image that the cursor is..
Change one line to this and it will work:
a.tooltip span {display:none; padding:2px 3px; margin-left:-130px; width:130px;}
@Jurgen: Thank you, it works.. how do I make it higher up?
Hi Mr. Koller.
This guy just doesn't listen to wht we say.
Why give a negative margin.
He should just use display:block; instead of display:inline; and then bottom:110%; or similar.
Cheers,
noRiddle
er I am here and I do listen, but when it doesn't work what u want me to do????
This DOES work actually: a.tooltip span {display:none; padding:2px 3px; margin-left:-130px; width:130px;}
I just to make the tooltip box a little higher and thats it.. simple.
Still waiting on a reply...
see here: http://bamboo1.midae.co.uk/ = hover over the first 2 dishes , see where the box appears - I need that above the picture not over it..
Justin
Excellent!! Simple, clean and it works!
THANKYOU! exactly what I needed! so much easier than any other ive found.