HTML: Title Tooltips and Alt text

Sadly, another one for the Internet Explorer Vs. Firefox debate.

It’s pretty well known that most browsers will display a tooltip of sorts when you hover over an image. The alt attribute of the img tag gives rise to that, in pretty much all places.

Lesser known is the title attribute, which is supposed to give the tooltip; the alt attribute might do that as a side-effect if title isn’t there, but it’s just that: a side-effect. The alt attribute is really there to give browsers that aren’t displaying images (or screenreaders that can’t see them anyway) some idea of what the image is.

This separation of concerns is somewhat of a problem when it comes to image maps: in image maps, the alt text for the area elements is there for similar reasons, to show what options are there when the image isn’t there. The title attribute is there for the tooltip, as ever.

However, if both alt and title are there, Internet Explorer shows the alt text as a tooltip, where Firefox will show the title text. Although they serve very different functions, a conscientious web developer is forced to keep them identical, or risk causing problems for the non-standards-compliant behaviour of Internet Explorer.

Of course, title will still work in other places, for example on images or even links:

<a href="mypage.html" title="My lovely page!">My Page</a>
Advertisements

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s