Alternative Abbreviations Demo

24th January 2005 · Last updated: 5th October 2016
 

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
  5. Chris Hester:
    Thanks to Moose! I followed his advice and made a new demo: Abbreviations Demo 2

    Posted on 13 November 2005 at 8:30 pm