The Lounge #2: Firefox IMG Tooltips

Howdy readers!

I wanted to share with you all a quick tip about displaying Tooltips for image HTML in Firefox.
This is an overlooked feature that some people think is broken in Firefox, i myself thought it was broken until i looked into it and it turns out that IE is actually at fault here, well to be more precise people have been taught the wrong way to create tooltips in IE.

Normally a tooltip is displayed in IE using the "Alt" tag;

<img src="http://mysite.com/images/myimage.jpg" />
would display myimage.jpg on the page with no formatting

<img src="http://mysite.com/images/myimage.jpg" alt="This is my image" />
would display a tooltip saying "This is my image" but would only work in IE because the "alt" tag was actually designed for something else. IE has a sort of bug where it displays the "alt" tag as the tooltip.

This is actually not the correct way to code this, instead you should use "title" e.g;

<img src="http://mysite.com/images/myimage.jpg" title="This is my image" />

This will now display the tooltip in both Firefox and IE and probably other browsers like Chrome, Opera and Safari.

I hope this has been useful to someone :)

See you next time!