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, 36.506 hits)
Chaos Crafter schreibt:
It’s worth noting thatt he critical detail for ie6 is that the background color (or possibly any other item that requires a whole-object re-render) must change.
So if you had a.tooltip {background:#ffffff;}
in the above example it would fail because with no change in the background no redraw occurs of the previously hidden span.
I haven’t experimented with it, but I suspect anything that forces a redraw of the whole A tag will make the difference.
Another one that does work is
a.tooltip {zoom:1;}
a.tooltip:hover {zoom:1.0001;}
(A warning though, zoom:1.00001 doesn’t work as it is rounded to 1, and 1.001 could be enough to perform a visible resizing of a full-screen-width panel.)
dario schreibt:
what a beauty ! there’s so many jquery tooltips out there but the simplicity of this is just too cool … muchas gracias !
Stephan schreibt:
Hi, nice tip, it works great.
But now I discovered a problem. I use tooltips on a form page, which might be printed by the user. At the moment all tooltips are displayed on printout. I didn’t found any way to hide them.
Any ideas. Thanks.
Stephan schreibt:
Just found the solution. To avoid any printout of the tooltip just add:
@media print { span {display:none;} }
If you might use span anywhere else, this items might not be printed either.
Michel schreibt:
Thanks a lot men…. I am very happy with this great tooltip. The first that is easy to build in (for me).
Jean-Philippe Martin schreibt:
Just to say thanks. This a great !
Anil schreibt:
Thanks a lot… very nice… 🙂
Mohammed schreibt:
so smart (h) , we can put an html in it of course
thanks for that
therealanodyne schreibt:
Hallo.
Dein Post ist ja schon was älter aber ich möchte einen kleinen Kommentar loswerden.
Dein Code funktioniert nicht in Webkit Browsern wie CHROME (IRON) oder SAFARI .
es gibt einen Konflikt mit
display: inline;
und
position: absolute;
im span style.
Beide beziehen sich auf Positionierung von Elementen und jeder Browser rendert das anders. (Ähnliche Probleme gibt es bei Anwendung von float, position und / oder display auf das selbe Element.
Wenn du erlaubst, hier der code der auch in Webkit Browsern funktioniert:
Easy CSS Tooltip - by Kollermedia.at; altered by therealanodyne
/* Easy CSS Tooltip - by Koller Juergen [www.kollermedia.at]; improved by therealanodyne */
* {font-family: Verdana, Arial, Helvetica, sans-serif; font-size:15px; }
a.tooltip {
position: relative;
left: 300px;
top: 100px;
}
a.tooltip:hover {
background: #ffffff; /*BG color is a must for IE6*/
text-decoration: none;
}
a.tooltip span {
display: none;
padding: 2px 3px;
border: 1px solid #cccccc;
background: #fff; color:#6c6c6c;
width: 130px;
}
a.tooltip: hover span {
display: block;
position: absolute;
left: 100%; /*or more for some margin-left*/
top: 0%;
}
Easy TooltipThis is the crazy little Easy Tooltip
Text..
Für Erscheinen des Tooltips unter dem Link (oder beliebigen anderen Elementen in modernen Browsern):
a.tooltip: hover span {
display: block;
position: absolute;
left: 0;
top: 100%; /*or more for some margin-bottom*/
}
Vor oder über dem Link ist ebenfalls möglich jedoch nicht flexibel, da die Positionierung von width des Link Elements oder height des span Elements abhängt.
Vielen Dank für deinen Post,
wobei ich hoffe die kleine Verbesserung sit von Nutzen.
Peace,
Anodyne
therealanodyne schreibt:
Uuups, habe irgendwo den “
"-tag vergessen, sorry.
Anodyne
therealanodyne schreibt:
Uuups, habe irgendwo den code-tag vergessen, sorry.
Anodyne
Mr.AD schreibt:
Thanks for the simple tooltip code. It very usefull for me now !
??? ???? schreibt:
Thanks for the simple tooltip code. It very
?????? ??? schreibt:
Uuups, habe irgendwo
?????? ??? schreibt:
tag vergessen, sorry.
en7rafcam schreibt:
tooltip code. It very usefull for me
alqassimcam schreibt:
Thanks for the simple tooltip
klam1 schreibt:
irgendwo den code-tag vergessen, sorry
Agustín Amenabar schreibt:
Excelent! simple and elegant and easy to style. You rock!
Marc Buurke schreibt:
Very nice indeed, thanks for sharing it!
Ron schreibt:
Thanks – very nice and simple. Appreciate it
JohnHU schreibt:
Thanks, five minutes and done… save my life:D
Andrew Allen West schreibt:
Hey! Just dropping by to let you know my experience with this. I am going to be writing a blog about it as well. I’ll comment up the link when I’m done with it and we think of a solution.
Anyhow, a couple things.
This ironically to me works better in Internet Explorer 8 on a Windows 7 Home Premium Operating System.
In Internet Explorer (I dont know if all, but 8 allow atleast) allows you to insert a link inside of the Tooltip. The tooltip obviously will disappear when you move away from the link with your mouse. How do we set a delay time for that to disappear?
Mre schreibt:
Very usefull tutorial man ill use it surely. Thanks 🙂
Wiyono schreibt:
Perfect…
Thank you so much…
AmilaDG schreibt:
Amazing. Thanks a lot.
Nikolay schreibt:
Thanks for the awesome guide! Nice and simple, but does the job! A++
hadinug schreibt:
wow,, it’s very simple
Brent Alton schreibt:
what is needed to affect the size of the font used in the tooltip?
Jürgen Koller schreibt:
Hi Brent,
just add: font-size:14px; (or the font-size you want) in the a.tooltip span {} line
Example:
a.tooltip span {display:none; padding:2px 3px; margin-left:8px; width:130px; font-size:14px;}
Brent Alton schreibt:
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.
noRiddle schreibt:
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
ebook schreibt:
how can i make it sticky and put a link on the tooltip?
noRiddle schreibt:
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
Brent Alton schreibt:
Google Chrome did a nice job of translating the page, so I think I can find what I need there. Thanks!!
noRiddle schreibt:
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
Dave schreibt:
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?
Dave schreibt:
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
Dave schreibt:
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 */
}
noRiddle schreibt:
@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
Alexandra Stan schreibt:
With Google Chrome translating pages works great, that’s why I believve I found what I need. Thanks a lot.
Kundan Singh schreibt:
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
ali schreibt:
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.
THANKS TO YOU !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! schreibt:
🙂
Justin schreibt:
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
noRiddle schreibt:
@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
Justin schreibt:
@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
Justin schreibt:
@noRiddle
That doesn’t work
noRiddle schreibt:
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
Justin schreibt:
not working
noRiddle schreibt:
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
Justin schreibt:
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..
Jürgen Koller schreibt:
Change one line to this and it will work:
a.tooltip span {display:none; padding:2px 3px; margin-left:-130px; width:130px;}
Justin schreibt:
@Jurgen: Thank you, it works.. how do I make it higher up?
noRiddle schreibt:
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
Justin schreibt:
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.
Justin schreibt:
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
Ben schreibt:
Excellent!! Simple, clean and it works!
Nicola schreibt:
THANKYOU! exactly what I needed! so much easier than any other ive found.
An American guy schreibt:
How did you make it so brief? Thank you — good stuff!
Sara schreibt:
Hi, and many thanks for the tooltip. I ‘ve made some changes to make it multilingual. It is working nicely and validates wrt W3C standards.
cgvector schreibt:
amaznig work i am going to embed this in my project. Thanks for sharing.
mike schreibt:
this may be a dumb question, but how do i use this?
i mean, where do i put it on my page, and can i use it for a bulletted
list?
floris schreibt:
Very neat!
Thanx for sharing
Andreas schreibt:
Großes Dankeschön, so einfach und so genial! 🙂
Bytza schreibt:
Thankyou.
Its realy usofoul 🙂
replica rolexes for sale schreibt:
I happen to enter your blog with the help of Google search. To my sheer luck I got what I was searching for. Thanks.
??? ???? schreibt:
s it possible to input user Custom Fields values through signin/registration form, e.g. by extending it with you CustomizedSignInTemplates?
Mark schreibt:
or an all-purpose tooltip class…
.tooltip span{display:none;}
.tooltip:hover span {position:fixed; top:1em; left:10%; width:80%;}…
and style font and container as desired…
Adam K schreibt:
good content , i used it on my site http://toplistapbf.toplista.eu/