Thread

The ABBR and ACRONYM tags aren’t used all that often, which is too bad because they’re valuable in making a block of jargon-heavy content more readable. Unfortunately, they aren’t very intuitive, since they require the user to hover over the word to learn the definition. Why not allow them to click the tag to display the full word? jQuery makes this trivial:

jQuery(document).ready(function() {
    jQuery(document).click(function(ev) {
        var target = jQuery(ev.target);

        if(target.attr('tagName') == 'ABBR' || target.attr('tagName') == 'ACRONYM') {
            var title = target.attr('title');
            var text = target.text();
            
            target.attr('title', text);
            target.text(title);
        }
    });
});

The code can be dropped into any jQuery-enabled environment without any setup. It supports “live” events, as well: inserting new ABBR/ACRONYM tags into the DOM tree are still caught when clicked (yay event bubbling!). The code simply swaps the title attribute and the inner text when you click on either an ABBR or ACRONYM tag. I thought about animating it, but I couldn’t think of a way to do it attractively without potentially forcing a lot of expensive page reflow operations.

It’s a nice idea but i wonder if people will not get confused by this. If the tool tip is shown the abbreviation or the acronym is still visible with your code there are no ties because you assume people don’t like to hover over words but they like clicking.

The common visual solution is to style abbr and acronym tags close to the link style, inviting people to move their mouse over the word. If you make it a click event the cursor should change to make the people realize they need to click on the word for something to happen.

I think this is a functionality you you better put into a bookmarklet. Clicking on it shows all abbr and acronym title, clicking for the second time goes back to the original state.

It’s a nice idea but i wonder if people will not get confused by this.

I like it as is, thanks Nick.

Well, one modification though: the mouse cursor should change to a hand…