HTML tip: Create cross-browser tooltips
Make sure that your images have a title tooltip in all browsers
Make sure that your images have a title tooltip in all browsers
THE ALT TAG is the popular choice for creating a mouseover tooltip, but this is not its intended use according to HTML specifications. It is meant to be an alternative for nonvisual browsers when they come across images. This means if an image is not available, the alt tag text is displayed instead. However, some browsers (including Internet Explorer, the most popular browser on the web) also display the alt tag’s text as a tooltip. Unfortunately, other browsers (more specifically, Firefox) adhere to the HTML specification in its true form and do not display the alt tag’s text. This leaves designers with a problem; obviously the alt tag still displays in Firefox for its intended purpose, but for an image to display a tooltip the title tag needs to be introduced.
The following code will only display a tooltip in Internet Explorer:
<img src=”myimage.gif” alt=”This is a tooltip” width: 150px; height: 150px;” />
To make sure that the tooltip appears in Firefox and other browsers, add the following code:
<img src=”myimage.gif” alt=”This is a tooltip “ title= ”This is a tooltip” style=”width: 150px; height:>
The beauty of the title tag is that it is not exclusive to images, it can also be applied to links in a page. To add a title to a link, add in as follows:
<a href=”index.html” title=”This takes you to the home page”>Home</a>
to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
Good tip, but ideally don’t use the ALT attribute at all for tooltip style functionality. As you point out ALT is intended to explain the meaning behind an image, if any. The TITLE attribute will display a tooltip in Firefox and IE so you can just use that for tooltip style functionality.
Finally as a small usability tip, I’d say tooltips should be used to add information and shouldn’t be the sole way to get that information. Ideally the graphics should be reasonably obvious enough to the user.
That’s my tuppence worth :)
Thanks for sharing this tip!
One question:
Should ALT tag be replaceb by the TITLE tag?