Interaction design • webdevelopment • web art • photography

January 2004

Pure css tooltips [via webgraphics]

Fidel wrote on 2004/01/21:
Stuff like this is key.

Micah wrote on 2004/01/26:
Ah, finally a place to rant about this article--or at least, to express some misgiving. Try disabling stylesheets for that page; you'll find that the text doesn't flow, because the "tooltips" are not part of the normal text, they are extra definitions and notes added after the flow was established. Thus, a user with a CSS-disabled browser (or a screen-reader) would be confused by the lack of continuity in the text. That's why this (pretty trivial) use of CSS was never put forward before, in my mind. Tooltips should either be left to the browser, as Mozilla does with the contents of the TITLE attribute, or with Javascript, importing text that does not disrupt the flow of the text.

Kethinov wrote on 2004/01/27:
Why on earth would someone disable stylesheets? I'm not going to cater to the twisted minority that actually does with the pages that I design. I think that's a fantatsic article. One of the best I've seen linked from here in a very long time.

milov wrote on 2004/01/27:
To be fair, it's not just about users purposely disabling their stylesheets; sometimes it's the browser.
For example, I'm posting this from my phone using the stylesheet-less Pocket IE, and the added spans do make the text look kinda funky.

Low wrote on 2004/01/27:
I have to agree with Micah on this one. Sure, the span hover thingies are neat, but why re-invent the wheel? The same goes for those ugly-ass tooltips that were implemented at MeFi a while back. *shudder*

milov wrote on 2004/01/27:
**now switching back to pro-custom-hovers-mode ^_^**
One big advantage of (some of) these custom tooltip solutions is that they appear instantly on mouseover of a link; with regular tooltips there's a delay before they appear, which means I often don't even notice them (especially when using a graphics tablet).