Post Archive
› January 21, 2004
Pure CSS Tooltips
Pure css tooltips, inspired by Eric Meyer's pure CSS popups. Works in IE5.5, Opera 7.11, Moz1.4. Pretty slick.
Comments
1. January 21, 2004 09:32 AM
2. January 21, 2004 09:40 AM
Grimm Posted…
It's a cool effect but theres a slight problem with it. In Opera when you hover over the links, a native tooltip pops up displaying the URI that the link leads to. This tooltip pops up on top of the CSS tooltip and obscures the first line of it
3. January 21, 2004 10:30 AM
Andreas Posted…
Sjoerd Visscher created a similar example in reply on my post about CSS3 driven sidenotes, but positioned his popups relative to the page's body.
All very nice, but just one drawback: it requires the introduction of a meaningless a tag.
4. January 21, 2004 01:36 PM
José Jeria Posted…
When a sentence is in 2 lines, and you hover the part on the second line, the tooltip will appear on the wrong place...
5. January 22, 2004 04:13 AM
6. January 22, 2004 07:08 AM
Cheah Chu Yeow Posted…
The use of the anchor tag (<a>) should be semantically incorrect here, since a tooltip is neither an anchor nor a link. I did up an alternative using only <span>s over here. Of course, this doesn't work in IE now, but the use of IE-only behaviors (ala whatever:hover) fixes this for now. If someone could tell me whether it works in IE/Mac and Safari, that would be great.
7. January 22, 2004 09:58 AM
8. January 22, 2004 01:33 PM
Kiffin Posted…
The only problem with this approach is that is breaks when using very long lines, e.g. the tooltip is not extended enough and the remainder of the text sticks out over to the right. Also, it does not take into account the edges of the browser window, so if a link is at the bottom of the window, the tooltip will appear below the edge and not be visible. Oh well, nothing's perfect, although I do have to admit that this is a creative and elegant solution for most cases
9. January 23, 2004 12:52 PM
MH Posted…
An odd bug: in Mozilla 1.4a, if the tooltip text is very short, it won't show up. There's an example on the sample page...try rolling over the link "css"
10. April 14, 2004 07:38 PM
Chris Posted…
Thanks for the tips, I have been looking for a CSS effect like that for yonks... even if it dosn't work with obsure browsers.11. April 24, 2004 10:16 PM
JB Posted…
I tried this in IE 6.0.2800, using both TITLE="tooltip" for anchor text and ALT="tooltip" for anchor IMG's. It worked in an on-and-off manner - sometimes fine, other times no tooltip at all on hover. By trial and error I found that if any animated gif's or flash movies are also visibile in the screen area, the tooltip won't display. Scrolling so that the flash or gif is no longer visible in the screen area immediately restores the tooltip. Also, an anchor IMG has to be completely within in the display area, not cut off at the bottom, or no tooltip. Can this be debugged?
12. June 23, 2004 12:45 PM
Justin Garcia Posted…
This has a problem in Safari. If a link is near the edge of a div, the tooltip will be cut off right at the edge of the div. Anyone else experience this?
13. March 29, 2006 03:28 PM
bran Posted…
Safari has this problem exactly as #12 described. Unfortunately I have not figured out how to fix or work around it.
Matthew Posted…
Nice tutorial - will we get to see this being used on wg?
Small caveat - the lack of space between the link and the tip when you have styles turned off (this may be a moz bug).
Love the print styles!