XHTML, how not to display the TITLE attribute as a tooltip

Question

To make my web site XHTML compliant, I have added a title attribute to all of my IMG tags.

However, when you mouseover an image, the text from my title attribute displays as a small popup. I don't want that text to be viewable.

Question: How do I prevent the browser from displaying the title attribute text as a popup while still keeping the title attribute present?

<img src="..." title="text that gets displayed as a popup but I don't want it to" />

Answer 1

This is browser specific. Some browsers choose to display the title attribute, some choose not to display anything, and some even choose to display the alt attribute instead. Though lately this has become more uniform across browsers, with most of them leaning to the title attribute..

Answer 2

You don't have to have a title to be compliant, you need an alt.

The behaviour you are seeing is the correct implementation by the UA of title so is hard/impossible to override.

Answer 3

Use ALT and TITLE together. Put your nice, helpful text in the alt tag and then nothing in the title tag like so:

<img src="http://www.google.com/intl/en_ALL/images/logo.gif"o 
     alt="Goooooooogle!"
     title="" /> 

If ALT is no longer "valid" (is it?!), I suggest that any solution around this slight validation annoyance will be far worse than ignoring it.

Answer 4

Title is meant to be shown, if you want an image description that does not show except for screen readers, use the alt attribute which is only shown if the image cannot be displayed (=> Screen readers).

Answer 5

I don't think this is a great solution, living with the tooltip is better, but if you set an absolutely positioned div with a solid background set to very low opacity (1%) and a higher z-index then your image, you should not get a tooltip.

 <img style="position:absolute;
             top:0;left:0;width:200px;height:200px;"
       src="yourImage.gif" alt="the text you don't want to show" 
                           title="the text you don't want to show"/> 
 <div style="position:absolute;
             top:0;left:0;height:200px;width:200px;
             z-index:1000;filter:alpha(opacity=01);
             -moz-opacity:0.01;background-color:gray;">
 </div>

Again, I don't suggest this, but this is just to show that there is a way...