But only very slightly… Jack Osborne, whom I have followed on Twitter for a while now, posted some time ago a tooltip tutorial whereby you utilise the :after CSS pseudo-element and the attr() function to populate it. His method works by giving an element a title="" attribute and a class of tooltip, and placing the content of the title attribute after the content, all through CSS.
The only technical downside I can see here is the necessity for that class. Using a simple attribute selector we can ditch that and basically say ‘if any element has a title, put that title after it in CSS’. By simply using [title] over .tooltip we can automate the process and trim some bytes, thus:
<a href="http://twitter.com/jackosborne" title="Follow Jack Osborne on Twitter">Jack Osborne</a>
[title]{
position:relative;
}
[title]:after{
content:attr(title);
color:#fff;
background:#333;
background:rgba(51,51,51,0.75);
padding:5px;
position:absolute;
left:-9999px;
opacity:0;
bottom:100%;
white-space:nowrap;
-webkit-transition:0.25s linear opacity;
}
[title]:hover:after{
left:5px;
opacity:1;
}By Harry Roberts on Tuesday, November 30th, 2010 in Web Development. Tags: CSS, CSS3, Progressive Enhancement | 6 Comments »
+
Jonathan Thomas said on 1 December, 2010 at 9:01 am
Hi,
Great work Harry, thank you.
Is there any way to make it work in IE 6?
Unfortunately, at our place, we still need to support IE 6, however ridiculous that is! :(
After looking at ‘Fangs’ (Firefox’s screen reader emulator), it doesn’t read out the title text unfortunately. We’re currently looking at making pure CSS tooltips that are completely accessible, do you have any ideas on how we can go about doing this?
Many thanks,
Jonathan
Ivan Nikolić said on 1 December, 2010 at 9:05 am
Shouldn’t this also show generic tooltip on :hover?
Harry Roberts said on 1 December, 2010 at 9:06 am
Jonathan:
Well with this being entirely progressive I’d personally not bother making it work in IE6, as IE6 users will still get the browser’s title attribute text on hover. If you want the stylistic effect I’m sure you could use some Javascript, but then in my opinion that’d be overkill for such a trivial addition.
Also, further to the above, the screenreader doesn’t want to be able to read the CSS tooltip as it will be reading the (more semantic) title attribute text anyway.
Hope that helps.
Ivan:
Yes, this is one drawback of this technique; you get the CSS tooltip and the browser default title attribute on
:hover. In an ideal world you’d have one or the other…Jack Osborne said on 1 December, 2010 at 11:09 am
Harry,
I had a good little debate going on in the comments of this article, before I decided to remove the comments from my site. So I thought I’d post some of the better ones in here for others to see — I’ll also update my article according with what I’m about to post and a link through to this article.
—
Doug Aitken Pointed out that you see the tooltip twice due to using the alt attribute – http://dl.dropbox.com/u/560599/scrnshts/tooltips.png
Frequency Decoder said:
And Nicolas Gallagher who I am sure you already know, said that Frequency Decoders alternative was his preferred option:
Some more food for thought.
Jonathan Thomas said on 1 December, 2010 at 1:16 pm
Harry, the problem is, as Jack states above, the screen reader doesn’t by default read the ‘title’ attribute. It’s a select option which needs to be switched on by users. As you’ll appreciate, many users won’t deem this necessary or won’t think of enabling the functionality and as a consequence, they will not be able to have any tooltip text read out to them.
I take your IE6 point, spot on. :)
Dan Arsenault said on 1 July, 2011 at 6:05 pm
@Ivan
You could just change the attribute to be something arbitrary like ‘tooltip’ and it will still work without showing the generic title tool tip. Not sure how this would effect screen readers.