Alternative Abbreviations Demo

24 January 2005 · Last updated: 11 December 2006

Comments

Here's a way to show the full text of abbreviations when hovering over the text. It uses no JavaScript, just CSS. Instead of showing the full text as a tooltip, it appears after the abbreviation in brackets. The exception is IE6 which can't handle the code needed, so the full text is shown as a tooltip only.


RUN THE DEMO


It works by doing away with the <abbr> tag (as IE6 doesn't recognise it) and using a combination of link and span tags. If the abbreviation isn't a link, the address can be kept blank.

I can think of two ways to improve on this. Firstly, you could use generated content to extract the text from the title used. (Sadly not a cross-browser technique.) Secondly, you could use JavaScript to add and remove a span to the document, which would contain the title text. (Alas not everyone has JavaScript turned on.)

View the source of the demo to see how it was done.

Comments (4)

Comments are locked on this topic. Thanks to everyone who posted a comment.

  1. Arve:
    I used to use this technique on my own site in the past, in the end, I found it so disturbing, since it reflows the paragraphs when you hover the abbreviations.

    Perhaps using p:hover acronym:after { display: inline; content: attr(title) } would work better?

    Posted on 24 January 2005 at 8:48 pm
  2. Arve:
    Doh. Tested it. Doesn't work in Opera :-(

    Posted on 24 January 2005 at 8:53 pm
  3. Moose:
    Why not use absolutely positioned generated content? Relatively position all abbreviations, and you should be fine.

    You can also fixed position the titles in some top-right corner, adding a bright background and large font size.

    M.

    Posted on 28 January 2005 at 4:26 am
  4. Dean:
    Safari no go:-(

    Posted on 31 January 2005 at 9:42 am

Useful Info

EMAIL: www.designdetector.com (replace the 1st dot with "@")

RSS NEWSFEED: Subscribe to news of fresh posts and site updates. (RSS 2.0 compatible newsreader required.)

Disclaimer

Some links on this website lead to information provided by external services not under my control, therefore I am not responsible for the content or accuracy of the linked information.

All code examples are not guaranteed 100% free from bugs and/or mistakes. Use them at your own risk. I do not take any blame should a problem occur relating to use of code on this site given as an example for your own use. Such code has been tested and found to work for me, but I cannot vouch for other computer systems (existing now, or in the future) which it may be used on, or changes you introduce yourself based on my code.

This website is © Christopher Hester, except where separate authors are named. No part of this website may be reproduced or re-used in any way without my prior permission, except content added from separate authors (who retain the copyright on their material), examples of code, and any other content I explicity state is free to copy and make use of.

This page was last updated on 11 December 2006.

What's New

Recent Finds


View previous finds

Current Book Reading

Recently Read Books