February 27, 2003, 4:42 PM ET
Dynamically displaying acronyms and abbreviations
I just implemented a quick CSS experiment -- using the content property to dynamically expand abbreviations and acronyms whenever you mouse over them. Here's the code:
acronym:hover:after { content: " (" attr(title) ")"; }
abbr:hover:after { content: " (" attr(title) ")"; }
In English: "Whenever a user mouses over an acronym or abbr tag, insert a space, start-parenthesis, full contents of the title attribute, and a close-parenthesis."
This effect will only be visible in browsers that fully support :hover and dynamic generation using content and after. On my Windows machine, it didn't work in IE 6 nor Opera 7. But it does work in Mozilla.
I'm not sold on this concept. It's more for entertainment than for function, because most browsers already render abbrs' and acronyms' title attributes in tool tips. I'm also concerned there might be a usability issue in the dynamic expansion of text: Say you're moving your mouse to click a link, and then the link moves because you've accidently moused over an acronym. Plus, this might annoy users who already know what an abbreviation means.
That said, it could be useful for the small percentage of Web users who haven't yet grasped the emerging convention of giving abbreviations a dotted underline. I've observed several people who try to click on those, to no avail, and don't wait the two seconds for a tool tip to show up. This method removes the delay; it gives instant results.
What do you think? Is this a usability faux pas?
UPDATE: I've removed the style rules from my global style sheet and posted a separate test page dedicated to this browser experiment.
