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


Share

Weitere Beiträge

0 Kommentare zu “Easy CSS Tooltip”

  2. Josh schreibt:

    Holy craps. Thank you, this is the easiest, least bloated version of tool tips I’ve ever seen, short of Firefox using anchor titles. I thank you for something I’ll use numerous times in the future.

  8. Waixo schreibt:

    It’s fantastic! but if i want show differents tooltips ,how can i do?
    If i put this code with more tooltips when the mouse is over the link, all the toltips are show.

  9. Webdawson schreibt:

    Hi Waixo, there should be no problem with more tooltips – you can use as much as you want. There is always just one visible…
    You can send me a link if you want – i’ll have a look

  10. Waixo schreibt:

    Hi webdawson, you have reason! It’s incredible! Thanks a lot!
    Always it’s fantastic know this things!

    Again i want say Thank you for your apportation in the world! 😀

  11. cd schreibt:

    Hello. I used the span tooltip and it works great in every browser except IE 6.0.

    I’m using the span tooltip code you posted on html column table headers. When you get near the column the tooltip will appear and not allow you to access the controls (ie: checkbox, text box, etc.) which it is covering. Therefore column header 1 tooltip overlaps column 2 and you can’t initiate the column 2 tooltip. I am only seeing this behavior in IE 6.0 and IE 7, Firefox 2.0+ and Safari display the span properly. And only seeing this behavior when the tooltip is used in close proximity of other tooltips on IE 6.0. Unfortunately I have 3000K+ users who are required to use IE 6.0. If you may provide any help with a solution for IE 6.0 or post the new code with the changes that would be great. Have you had an opportunity to see this on IE 6.0? Have a good week.

  16. Jorg schreibt:

    Nice little piece of code! But unfortunately, when I use it with IE the tooltip won’t overlap any links. Undelaying text works well, but any links show up as if they where part of the tooltip. When I turn off “position:relative” for the anchor element it works, but then I can’t position the tooltip next to the desired element, as Firefox starts positioning all tooltips from the very left if i only use Position:absolute, which again works fine in IE. I was wondering if somebody knows a fix to this problem? thank you, regards Jorg

  17. Chris schreibt:

    Wow, this… this seems too good to be true! If I didn’t see it working with my own two eyes, I wouldn’t believe it!

    I’ve spent the last two hours looking for different ways to get tooltips on my blog, and this is the only one that I’ve been able to get to work.

    Magnificent work!

  23. xHire schreibt:

    Thank you for this cool tooltip! 🙂 It’s very useful and handy. I was looking for such good thing for a long time!

    BTW works fine in Opera 9.25, Firefox 1.0.2, Konqueror 3.3.2.

  25. Tiziano schreibt:

    Hi, very useful tool tip.

    Is possible to change the position of the tooltip ? instead of on the right, to be displayed on the left/top/bottom ?

  26. Ilona schreibt:

    I tried to externalize the CSS in a stylesheet but I can only get it to work by embedding it in the page where it’s being used (with style tag). When in an external style sheet it renders all the tip text, no hover or anything, just displays everything in the spans. Any ideas? It would negate the beauty of this code to have to replicate this in every page where we’re using the tips.

  32. Larry schreibt:

    Great Tooltip!

    I have six icons (3 columns, 2 rows) that are very close to each other. I would like to display a separate tooltip for each. Is there a way to position the tooltips so only one shows and doesn’t overlap the others?

    Here’s what I would like to do:

    Top Row

    1st Icon – Upper left tooltip
    2nd Icon – Top center tooltip
    3rd Icon – Top Right tooltip

    Bottom Row

    1st Icon – Lower Left tooltip
    2nd Icon – Bottom center tooltip
    3rd icon – Lower right tooltip

    Can someone help?

  33. Brad schreibt:

    thank you so much for this script. i never comment on sites, but this is something i have been looking around forever for and felt you deserved the kudos. All the scripts i have found are filled with a lot of things you don’t need and actually just end up ruining the code.

  36. Eric schreibt:

    I’m new to webdesign (1 month and counting) and this is perfect for me! easy to figure out and implement. although i am having problems viewing it in IE6. might be b/c i’ve added a background image to the tooltip? works perfect in MF though! Thanks alot!

  38. mort schreibt:

    There is a problem with the z-index i guess, it’s always on the top and didn’t show any interest on added z-index:xx css tags. 🙁

  41. Leah schreibt:

    Hey,

    My links are within cells of a dynamically created tabled.

    In IE the tooltips are appearing behind the cells which follow.

    Any ideas?

  47. Julie schreibt:

    Wow! Thanks so much. Spent all day looking for a Javascript solution and then bump into your site which has it solved with a couple of lines of CSS. Simplicity rules!

  48. Instant Adsense Machine schreibt:

    Great code!! So much easier than Javascript solutions. The only thing I wish for is it could do position so it’s not using inline. I rather have it next to the word rather than at the end of it. Any ideas?

  51. Krestort schreibt:

    Recently one of my friends started an obsession with the actor Nicholas Cage (mostly because their names are both Nicholas – sounds strange but he is strange and that isn’t the point). After asking around the rest of my friends he seems to be a very controversial figure.
    What does the forum think? do you love the all action superhero? Or do you hate the droning voice of the man who does nothing but action shooters?

  55. Tyler Demerchant schreibt:

    First, is you can incorporate javascript into the css by using the DOM.

    document.getElementById(“tooltip1″).innerHTML=”This is tooltip1”

    ex. Hover me
    Using this method, you can hover blocks of text, images, buttons, etc.
    Still very simple, but more versatile.

    Second, you can have it position how you want to by adding stuff to the style, like block instead of inline for the display and also set the start points within the css.

    One problem that is always apparent is that you can end up running off the sides of the page if you use absolute positioning. I am still trying to find a way to use the mouse position to adjust the top left corner during absolute postitioning.

  58. Dan Black schreibt:

    I realize this post isn’t brand-new but just wanted to say…

    Great elegant CSS solution! I will definitely use this on future projects.

    That said, this doesn’t work on floated elements.

  59. Rob schreibt:

    Hi Jurgen,

    Thanks for this tip. I used it in my laboratory’s site earlier this year and it worked great.

    But for some reason it now doesn’t work in IE and Chrome (fine in Opera, FireFox and Safari – weird).

    I was hoping you might have some ideas why this might be. The page is here: http://www.putslab.psu.edu/research.html The tooltip appears to the right of the graphs.

    The CSS is here: http://www.putslab.psu.edu/putsstyle.css with the Tooltip code at the very bottom.

    Thanks again,
    Rob

  61. mike schreibt:

    i’m sure this is all too obvious – is it possible to change the position? i.e., the “tool tip” appears on top of the selected link and not the bottom.

    thanks.
    mike

  62. Big fat fan of Tshirts schreibt:

    Very Simple, code friendly tooltip. Happy with this mate, thanks.

    I tried lots of different ones and this is definitely the simplist with the smallest footprint. So simple infact, I shouldve thought of it myself!

    I always like to increase my Karma whenever I use someone elses code:

    @mmenger. Try adding return:false; to your link if you don’t want it to reload the page.

    @Larry. Try creating more than one tooltip style, eg tooltip1, tooltip2 etc.

    @Mike. Positioning of the tooltip is easy, it’s absolute positioned, so just use top,bottom,left and right to get it where you want it.

    @Steve. “Is there any way to display a text file in the tool tip?” YES you can, stick an iframe in your span and it should work fine, no reason why it wouldnt. Probably not in IE though, youll have to test.

    @krestort. you are an idiot.

    @cd. IE6 is dogger isnt it. Personally, I would boot all IE6 users to the firefox homepage. Your problem could be solved by repositioning the tooltip and/or changing the z-index.

    @WebDawson. Hope you don’t mind me sticking my nose in. I like to earn the code I use and the backlink I get!
    Cheers!

  63. Mel schreibt:

    VERY NICE… I like the simple things, no much fuzz and buzz and it works (not even a js) … WONDERFUL. Thank you

    Q: I have another very nice little CSS mouseover that would dim an image. NO, it;s not with opacity setting (no WC3 validation) but the dim is achieved with using a semi-transparent. The only thing is. It makes my original image disappear. Anyone could H E L P ?

    cHEErs

  64. Harishankaran schreibt:

    Awesome. Simple awesome. 🙂

    “Any intelligent fool can make things bigger, more complex, and more violent. It takes a touch of genius — and a lot of courage — to move in the opposite direction.”

    You surely have eliminated the need for complex jquery plugins with just 4 lines of code. 🙂

  68. Rick schreibt:

    Hi,

    I love this little tooltip, but am experiencing problems when I use it in (you guessed it) IE6. Instead of using text as the link, I am using an image. As I implied, in FF it works wonderfully. In IE 6 however, the “tip box” does not obey the “margin-left:8px” command on hover.
    Here is the :
    LINK
    The tooltip is linked to the small “Information” icon (Circle I) to the right of the music player.
    Another weird occurrence is that mousing over the “Buy Song” button will also bring up the tooltip, even tho it is after the closing of the tooltip!

    Here is the css:

    /* Easy CSS Tooltip – by Koller Juergen [www.kollermedia.at] */
    .tooltip {font-family:Verdana, Arial, Helvetica, sans-serif; font-size:11px; }
    a.tooltip {border:none; text-decoration:none;}
    a.tooltip img{border:none; text-decoration:none; vertical-align:middle;width:20px;height:19px;margin-left:8px;}
    a.tooltip: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:200px;text-decoration:none; vertical-align:middle;}
    a.tooltip:hover span{display:inline; position:absolute;border:1px solid #cccccc; background:#f0f0f0; color:#6c6c6c; vertical-align:middle;z-index: 2;}

    Here is the HTML:


    Song 1: Higher Frequency. Producer:

    As you can see, I have fussed with the code a it to try to correct things.
    Does anyone see anything that I could do to correct this?
    Thanks 🙂

    Rick

  70. Marty schreibt:

    Works great and is exactly what I was looking for (and looking for couple a of days now).

    Few comments, tho:

    @Big fat fan of Tshirts / mmenger:

    I’m not too advanced and needed a moment to figure out the “return:false;” thing, and ended up using

    @the original script:

    I’m using a few different link styles in external style sheet, so instead of using:
    a:hover {background:#ffffff; text-decoration:none;}

    …to remove the underline, I added one line of:

    a.tooltip {text-decoration:none;}

    This lil script is great, great help! Thank you.

  71. Marty schreibt:

    Ewww…Sorry for that, didn’t notice I could use html in the message.

    I meant I ended up using OnClick=”return false” in my link.

  74. Robert Stones schreibt:

    Hi,

    I am new to tooltips and trying many variations but struggling to grasp it to be honest. I have found yours the most simple to implement so thank you for that. I do have a pressing question though, how do I keep the tooltip simple to understand but enable me to produce tooltips that are not launched from links but from standard text in a page, whereby when the text is moused over, it pops up the tooltip?

    Any guidance would be much appreciated in this matter. 🙂

    Regards,
    Rob

  75. Dan Jones schreibt:

    Tooltips are even easier than that. You don’t need CSS; straight HTML will do. A tooltip appears with the title attribute in most browsers, and it’s valid on any element.

    Try Paragraph text

  76. Robert Stones schreibt:

    Hi Dan,

    Would it be possible to somehow exchange an email about what you’re saying, as I’d dearly love to get tooltips working for different areas of my site but as noted in my post above, most will be not linked tooltips and instead say a ? image and once they’re hovered over it opens the tooltip.

    With Easy CSS Tooltip’s “Easy TooltipThis is the crazy little Easy Tooltip Text.” I also would take it I can add even more in to this small snippet of code to enable me to place images etc within it also?

    Not sure if I’m allowed to do this but if you could email me on robert dot stones at shopfullstop dot co dot uk (Obviously remove the dot and replace with . etc) it would be much appreciated.

    Regards,
    Rob

  77. Dan Jones schreibt:

    Robert,

    To benefit others, I’m responding here, but will also respond by email, in case you’d like to ask more questions.

    The instructions given in this tutorial allow you to add more than text. Any HTML you can stick inside a span is valid with this method.

    If all you need is a plain text tooltip, title is sufficient. In other words, the example on this website (Easy TooltipThis is the crazy little Easy Tooltip Text..) could be rewritten as:
    Easy Tooltip.
    No CSS is needed for this to work, and it doesn’t require you to use an in a non-standard way.

    Obviously, that’s significantly easier.

    I haven’t tested it on various browsers, but I believe every modern browser supports it properly.

  78. Dan Jones schreibt:

    Whoops, I didn’t realize it was accepting my HTML.
    Let’s try this last part again.

    If all you need is a plain text tooltip, title is sufficient.

    In other words, the example on this website (Easy <a class=”tooltip” href=”#”>Tooltip<span>This is the crazy little Easy Tooltip Text.</span></a>.) could be rewritten as:
    Easy <span title=”This is the crazy little Easy Tooltip Text.”>Tooltip</span>.
    No CSS is needed for this to work, and it doesn’t require you to use an <a> in a non-standard way.

  79. Paul K schreibt:

    I am seeing the same problem on IE6 as CD and the z-index does not help. Using left does not help either. The problem is that once it has popped, IE6 does not restore it to the non-hover size (although it does undisplay it). This means that the active zone for the link is now the original link plus the “span”. If you have anything under that, it cannot be reached anymore. The z-index would imply setting a z-index on pop of a positive number and using a negative number when not popped. But, again, it does not restore it post hover.

    As to Dan Jones, you obviously do not understand that the tooltips from titles are very limited in size and not the same across all browsers. When you do your own, you can show far more data and format it besides.

  80. Paul K schreibt:

    OK, I solved the problem on IE6. It must use the :hover span {} to change the link zone and so never shrinks it. So, you have to z-index on the a{} and a:hover{} so that it is above the other elements when hovering but below them otherwise.
    Works on all browsers this way.

  83. Jessica Todd schreibt:

    I love this tooltip, but is there a way to include a link within the tooltip ? I modified the CSS so the tooltip appears on :active and :focus (allowing my mouse to rollover links within the tooltip) but when I clilck on them, it just makes the tooltip disappear. I would love to avoid using javascript.

  89. Doris schreibt:

    This is so easy! Love it!

    I am having a prob – and after reading through all the comments, I thought I had it figured out (thanks to Big Fat Fan of T-Shirts). However, it’s still giving me some issues. Any help would be appreciated.

    In the gallery (www.robkazart.com), I am using the tooltip to show a larger image of the thumbnail. The images are going off the screen on the right.

    I tried changing the position from absolute to left, but when I do that, the image appears at the bottom of the thumbnail and within the table (rather than hoovering over it like it does on the ones with absolute).

    I tried making two styles (tooltip1, tooltip2) and that works great. Once I have this positioning thing figured out, I’ll be able to use tooltip 1 on the left column of thumbnails and tooltip 2 on the right column of thumbnails to completley avoid the off-the-page thing.

    Still, though, the positioning thing is making me crazy. Any ideas or suggestions?

    Thanks a ton!

  90. landon schreibt:

    Having a problem in IE 8 with a div overflow: auto; The tooltips appears relative to the links position, ignoring the div height of 200px; So in return the scrolling div has tooltips that show up as if there was no height on the div. Any ideas?