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 &lt;a class=&quot;tooltip&quot; href=&quot;#&quot;&gt;Tooltip&lt;span&gt;This is the crazy little Easy Tooltip Text.&lt;/span&gt;&lt;/a&gt;.

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

zip  Easy CSS Tooltip (690 bytes, 33.766 hits)


 

169 Kommentare »

9 Trackbacks

therealanodyne schrieb am 12. August 2010 um 14:33

Uuups, habe irgendwo den code-tag vergessen, sorry.

Anodyne

Mr.AD schrieb am 26. September 2010 um 12:43

Thanks for the simple tooltip code. It very usefull for me now !

??? ???? schrieb am 19. Oktober 2010 um 19:39

Thanks for the simple tooltip code. It very

?????? ??? schrieb am 19. Oktober 2010 um 19:40

Uuups, habe irgendwo

?????? ??? schrieb am 19. Oktober 2010 um 19:41

tag vergessen, sorry.

en7rafcam schrieb am 19. Oktober 2010 um 19:42

tooltip code. It very usefull for me

alqassimcam schrieb am 19. Oktober 2010 um 19:44

Thanks for the simple tooltip

klam1 schrieb am 19. Oktober 2010 um 19:45

irgendwo den code-tag vergessen, sorry

Agustín Amenabar schrieb am 27. November 2010 um 4:50

Excelent! simple and elegant and easy to style. You rock!

Marc Buurke schrieb am 6. Dezember 2010 um 15:43

Very nice indeed, thanks for sharing it!

Ron schrieb am 14. Dezember 2010 um 20:39

Thanks - very nice and simple. Appreciate it

JohnHU schrieb am 31. Januar 2011 um 20:48

Thanks, five minutes and done... save my life:D

Andrew Allen West schrieb am 5. Februar 2011 um 15:09

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 schrieb am 10. Februar 2011 um 3:39

Very usefull tutorial man ill use it surely. Thanks :)

Wiyono schrieb am 23. Februar 2011 um 21:04

Perfect...
Thank you so much...

AmilaDG schrieb am 6. März 2011 um 8:41

Amazing. Thanks a lot.

Nikolay schrieb am 14. April 2011 um 17:11

Thanks for the awesome guide! Nice and simple, but does the job! A++

hadinug schrieb am 28. Juni 2011 um 1:42

wow,, it's very simple

Brent Alton schrieb am 14. Juli 2011 um 23:09

what is needed to affect the size of the font used in the tooltip?

Jürgen Koller schrieb am 15. Juli 2011 um 8:10

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 schrieb am 15. Juli 2011 um 20:33

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 schrieb am 18. Juli 2011 um 12:55

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 schrieb am 19. Juli 2011 um 10:34

how can i make it sticky and put a link on the tooltip?

noRiddle schrieb am 19. Juli 2011 um 11:44

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 schrieb am 20. Juli 2011 um 15:20

Google Chrome did a nice job of translating the page, so I think I can find what I need there. Thanks!!

noRiddle schrieb am 20. Juli 2011 um 19:08

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 schrieb am 7. August 2011 um 0:51

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 schrieb am 7. August 2011 um 0:56

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 schrieb am 7. August 2011 um 3:08

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 schrieb am 7. August 2011 um 4:34

@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 schrieb am 23. August 2011 um 22:46

With Google Chrome translating pages works great, that's why I believve I found what I need. Thanks a lot.

Kundan Singh schrieb am 3. September 2011 um 6:50

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 schrieb am 30. Oktober 2011 um 15:54

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 !!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! schrieb am 17. November 2011 um 7:49

:)

Justin schrieb am 9. Dezember 2011 um 12:55

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 schrieb am 9. Dezember 2011 um 13:57

@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 schrieb am 9. Dezember 2011 um 14:12

@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 schrieb am 9. Dezember 2011 um 14:40

@noRiddle

That doesn't work

noRiddle schrieb am 9. Dezember 2011 um 14:47

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 schrieb am 9. Dezember 2011 um 14:52

not working

noRiddle schrieb am 9. Dezember 2011 um 15:11

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 schrieb am 9. Dezember 2011 um 15:26

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 schrieb am 9. Dezember 2011 um 18:09

Change one line to this and it will work:
a.tooltip span {display:none; padding:2px 3px; margin-left:-130px; width:130px;}

Justin schrieb am 9. Dezember 2011 um 18:22

@Jurgen: Thank you, it works.. how do I make it higher up?

noRiddle schrieb am 9. Dezember 2011 um 18:43

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 schrieb am 9. Dezember 2011 um 18:48

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 schrieb am 9. Dezember 2011 um 23:00

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 schrieb am 29. Dezember 2011 um 3:39

Excellent!! Simple, clean and it works!

Nicola schrieb am 2. Februar 2012 um 5:37

THANKYOU! exactly what I needed! so much easier than any other ive found.

An American guy schrieb am 4. April 2012 um 1:19

How did you make it so brief? Thank you -- good stuff!

Sara schrieb am 19. Juni 2012 um 0:01

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 schrieb am 2. Juli 2012 um 10:44

amaznig work i am going to embed this in my project. Thanks for sharing.

mike schrieb am 2. Juli 2012 um 23:47

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 schrieb am 8. August 2012 um 14:33

Very neat!

Thanx for sharing

Andreas schrieb am 13. August 2012 um 18:44

Großes Dankeschön, so einfach und so genial! :-)

Bytza schrieb am 25. August 2012 um 8:48

Thankyou.
Its realy usofoul :)

replica rolexes for sale schrieb am 27. August 2012 um 19:46

I happen to enter your blog with the help of Google search. To my sheer luck I got what I was searching for. Thanks.

??? ???? schrieb am 23. September 2012 um 23:04

s it possible to input user Custom Fields values through signin/registration form, e.g. by extending it with you CustomizedSignInTemplates?

Mark schrieb am 14. Juni 2014 um 9:43

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...

Seite 2 von 2«12
Kommentar schreiben

(erforderlich)

(required but will not be published)

(if you have one)

Bild einfügen:<img src="http://www.website.com/meinbild.jpg" alt="bildbeschreibung" />


 
Produced and © by Koller Jürgen | Impressum | Love and Joy to everyone