About descriptive text pop-ups in web pages

If you have ever noticed a little yellow text box pop up when you hover your mouse over an image in a web page, then you know what IΩm talking about. These descriptive text boxes are most commonly achieved by adding the property ALT to the image tag. However, no Mac browser does this, and this was not really the intent of ALT anyway. ALT was intended to show descriptive text of an image if the image link was broken, or if a user was using a text-only browser.

Perhaps a more appropriate option is to use the TITLE property in an A tag. This allows the display of the popup text box on both Windows and Mac browsers, and allows for appropriate use of ALT text in the same context. Well, perhaps that appropriate use is theoretical at this point, since the Internet Explorer browser on Windows allows ALT to override TITLE when displaying the popup text box on mouseovers, but at least they get it right on their Mac version of the browser.

TITLE is added like any other property to an anchor tag. For instance, <a href=”http://www.mozilla.org/” title=”Go to the Mozilla Site”> will make any hyperlinked object, be it text or an image, display the text ΩGo to the Mozilla SiteΩ when you hover the mouse over it.

For now, since browser displays between versions and operating systems are inconsistent, you must know your audience before getting too into this. If youΩre providing Ωtool tipsΩ style objects in your website, you must be aware of the differences and be prepared to account for the differences your users will encounter between different platforms. At least with Mozilla these properties seem to be consistent on each operating system. HereΩs a quick overview of popup text mouseover behaviors:

IE 6 for Windows Ω ALT overrides TITLE, ALT text appears neatly wrapped while TITLE appears as single line and fixed width.

IE 5.1 for Mac Ω ALT does not generate mouseover text, TITLE appears neatly below image in question and wrapped

Mozilla 1.0 for all OSes Ω TITLE overrides ALT in all cases, but only displays single line and has a fixed width.

Sample Code:

<a href=”#” title=”Hello, world!”>
<img src=”image.gif”>