Scripts

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

  Easy CSS Tooltip (690 bytes, 36.456 hits)


Share

Weitere Beiträge

IE6 double margin bug

0 Kommentare zu “Easy CSS Tooltip”

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

  2. dario schreibt:

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

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

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

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

  29. 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;}

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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