: Which should I use for mouse over tooltip for image (alt, longdesc, title) Currently, my webpage images use the alt attribute only. Users complain that their IE8 cannot show the "tooltip" bubble

@Samaraweera270

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.

Vote Up Vote Down

@Annie201

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.

Vote Up Vote Down