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, 34.065 hits)


171 Kommentare

  1. Chaos Crafter 19. März 2010 um 4:32

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

  2. dario 19. März 2010 um 16:14

    what a beauty ! there's so many jquery tooltips out there but the simplicity of this is just too cool ... muchas gracias !

  3. Stephan 24. März 2010 um 17:36

    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 25. März 2010 um 14:32

      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.

  4. Michel 4. April 2010 um 9:13

    Thanks a lot men.... I am very happy with this great tooltip. The first that is easy to build in (for me).

  5. Jean-Philippe Martin 7. April 2010 um 16:44

    Just to say thanks. This a great !

  6. Anil 18. Juni 2010 um 10:22

    Thanks a lot... very nice... :)

  7. Mohammed 29. Juli 2010 um 3:49

    so smart (h) , we can put an html in it of course

    thanks for that

  8. therealanodyne 12. August 2010 um 14:27

    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

  9. therealanodyne 12. August 2010 um 14:29

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

    Anodyne

  10. therealanodyne 12. August 2010 um 14:33

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

    Anodyne

  11. Mr.AD 26. September 2010 um 12:43

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

  12. ??? ???? 19. Oktober 2010 um 19:39

    Thanks for the simple tooltip code. It very

  13. ?????? ??? 19. Oktober 2010 um 19:40

    Uuups, habe irgendwo

  14. ?????? ??? 19. Oktober 2010 um 19:41

    tag vergessen, sorry.

  15. en7rafcam 19. Oktober 2010 um 19:42

    tooltip code. It very usefull for me

  16. alqassimcam 19. Oktober 2010 um 19:44

    Thanks for the simple tooltip

  17. klam1 19. Oktober 2010 um 19:45

    irgendwo den code-tag vergessen, sorry

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

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

  19. Marc Buurke 6. Dezember 2010 um 15:43

    Very nice indeed, thanks for sharing it!

  20. Ron 14. Dezember 2010 um 20:39

    Thanks - very nice and simple. Appreciate it

  21. JohnHU 31. Januar 2011 um 20:48

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

  22. Andrew Allen West 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?

  23. Mre 10. Februar 2011 um 3:39

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

  24. Wiyono 23. Februar 2011 um 21:04

    Perfect...
    Thank you so much...

  25. AmilaDG 6. März 2011 um 8:41

    Amazing. Thanks a lot.

  26. Nikolay 14. April 2011 um 17:11

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

  27. hadinug 28. Juni 2011 um 1:42

    wow,, it's very simple

  28. Brent Alton 14. Juli 2011 um 23:09

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

  29. Jürgen Koller 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;}

  30. Brent Alton 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.

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

  32. ebook 19. Juli 2011 um 10:34

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

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

  34. Brent Alton 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!!

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

  36. Dave 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?

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

  38. Dave 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 */
    }

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

  40. Alexandra Stan 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.

  41. Kundan Singh 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

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

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

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

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

  46. Justin 9. Dezember 2011 um 14:40

    @noRiddle

    That doesn't work

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

  48. Justin 9. Dezember 2011 um 14:52

    not working

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

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

  51. Jürgen Koller 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;}

  52. Justin 9. Dezember 2011 um 18:22

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

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

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

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

  56. Ben 29. Dezember 2011 um 3:39

    Excellent!! Simple, clean and it works!

  57. Nicola 2. Februar 2012 um 5:37

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

  58. An American guy 4. April 2012 um 1:19

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

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

  60. cgvector 2. Juli 2012 um 10:44

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

  61. mike 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?

  62. floris 8. August 2012 um 14:33

    Very neat!

    Thanx for sharing

  63. Andreas 13. August 2012 um 18:44

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

  64. Bytza 25. August 2012 um 8:48

    Thankyou.
    Its realy usofoul :)

  65. replica rolexes for 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.

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

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

  68. ????????? ? sono-loc 11. Oktober 2014 um 4:21

    […] Easy CSS Tooltip????????????CSS??????????????????????????????? […]

  69. Adam K 22. Oktober 2014 um 21:54

    good content , i used it on my site http://toplistapbf.toplista.eu/

Kommentar verfassen


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