This idea was directly inspired by Nicolas Gallagher’s article Multiple Backgrounds and Borders with CSS 2.1 – which is a must-read for any self respecting web designer out there in the ether (it has to be one of the best CSS techniques I’ve seen in a long time and it’s a technique that’s here to stay, so go read up on it).
Don’t forget, all of the disclaimers detailed by Nicholas in his original article apply here as well (z-index issues, browser support etc).
Quick Notes on the implementation
- No Javascript or extra HTML elements required
- The tooltip is composed of two elements created by using :before & :after generated content
- The tooltip arrow is created by using the borders of the :before generated content layer
- The tooltip body is created by using the :after generated content layer
- The content declaration
content:attr(data-tooltip);is used to fill the :after generated content layer with the text of thedata-tooltipattribute - Only nodes having the
data-tooltipattribute are converted to a tooltip by using a sneaky CSS selector*[data-tooltip](Note: the star selector is a performance killer and it would be better to replace it completely with a known set of elements e.g.span[data-tooltip], a[data-tooltip]) - None of the CSS transitions currently present in the demo source work as no browser currently supports using transitions on generated content layers
- It was written in my lunch hour and I’m sure you will find ways to improve on the implementation
Accessibility
Zero. None. Nada. As generated content is ignored by screen-readers & alternative browsing devices, the tooltip content is not accessible. So, to cut to the chase, don’t use the tooltips if you care about the accessibility of your web content (and you do care – don’t you?). It was an interesting lunchtime experiment, no more, no less.
Misuse of the HTML5 Custom Data Attribute
The presence/absence of a particular data attribute should not be used as a CSS hook for any styling. Doing so would suggest that the data you are storing is of immediate importance to the user and should be marked up in a more semantic and accessible manner.
Via html5doctor.
Demo
View the tooltip demo. Theoretically suitable for consumption in IE8+, Chrome 4+, Safari 4+, Firefox 3.6+ and Opera 10+. Tested in Firefox & Safari.
Previous Comments ~
Completely over-engineered.
Use the dfn / abbr element with a title and style it:
See http://camendesign.com/code/uth7_floaty-abbrs
and http://camendesign.com/code/abbr_redux for details on semantic use of dfn and abbr.
Hi Kroc,
You’re expanding abbreviations, I’m showing a tooltip – different things entirely. Over-engineered or not, I wasn’t striving for any sort of perfection… maybe you didn’t see the “this was a lunchtime experiment” bit.
Hi!
Sorry! This is offtopic!
I have some question for the datepicker, but I don’t found the e-mail address. What is that?
I believe VoiceOver reads generated content; ARIA mandates it
Bloody amazing, might needs some cleaning up but other then that its absolutely amazing
Is there any way to make this work on an image map?
Like <area shape=“rect” coords=“641,165,669,185” href=“index-en.html” target=”_parent” title=“Hotel Jijona in English”/>, where the “title” would be the tooltip?