Which should I use for mouse over tooltip for image (alt, longdesc, title)

Question

Currently, my webpage images use the alt attribute only.
Users complain that their IE8 cannot show the "tooltip" bubble when they mouse over the image. On Microsoft's What's New in Internet Explorer 8 page, it says

The alt attribute is no longer displayed as the image tooltip when the browser is running in IE8 Standards mode. Instead, the target of the longDesc attribute is used as the tooltip if present; otherwise, the title is displayed. The alt attribute is still used as the Microsoft Active Accessibility name, and the title attribute is used as the fallback name only if alt is not present.

I also found that many say title should be used.
Which should I use to meet the industrial standard: alt, longdesc or title?

Answer 1

Many CMSes place that content in both the title and the alt attributes, but those attributes do have different semantic meanings. Whereas title is explicitly meant to be used for tooltips, alt is (a) what's read to visually impaired users, and (b) what gets rendered if the image doesn't load for some reason. If you're only going to write one piece of text and duplicate it using jQuery, I would write it for the alt attribute and copy it to the title using the following jQuery code:

$().ready(function(){
    $('img[alt]').each(function(){
        $(this).attr('title', $(this).attr('alt'));
    }
}

Be sure to modify the img[alt] piece if you don't want to apply this change to every image on the page; for instance, use #content img[alt] to only apply it to descendants of <div id="content">.

The decision to use alt over title in your HTML is based on three factors: first, accessibility is important, and you can't rely on Javascript being enabled; second, it sounds like you already have alt attributes in place; third, the tooltip in this case is a nonstandard user request you may want to disable in the future, but the images should still have that text associated with them even if you do.

Answer 2

Title attributes in <img> tags are what show up on mouse over by default. I would use the title attribute or use a jQuery plugin to create nicer tool tips on mouse hover.