Notice: Undefined index: order_next_posts in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 194

Notice: Undefined index: post_link_target in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 195

Notice: Undefined index: posts_featured_size in /nas/content/live/gadgetmag/wp-content/plugins/smart-scroll-posts/smart-scroll-posts.php on line 196

Create cross-browser tooltips with HTML

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>