Is there a way to show alt="text" as a mouseover tooltip in firefox like IE does automatically?

Question

I don't want to repeat alt text in title again? is this possible with any javascript , jquery, css solution? or any solution which can disable to show alt=text and enable title=texr and as a tooltip?

Answer 1

The correct way to do this is to use the title attribute.

e.g.

<div title="This is your tooltip">...content...</div>

The "alt" attribute is only designed to provide "alternative" text when an image element is used (but not available to the user... e.g. blind users, or users with text-based browsers etc.)

Answer 2

alt text is for an alternative representation of an image. title text is for tooltips.

IE's behavior is incorrect in this regard, and Firefox will never implement it. (The bug in the Bugzilla database is #25537, which is VERIFIED WONTFIX.)

Not only that, but even Microsoft has admitted that their behavior is incorrect, and IE 8 doesn't show alt text as tooltips anymore!.

So don't rely on alt text being displayed as a tooltip. Use title instead.

Answer 3

Like scunliffe says, the right way to do this is in the title attribute. Its better to comply to the standard than rely on IE's non-standard behavior. Keep in mind the title attribute is for tooltips for users that can see the image, alt text is for users who can't (although they can see the title as well). If this really bugs you, you can just use javascript to set the title attributes to the alt attributes for all your images, giving you a cross browser effect. :D

Something like this:

 var images=document.getElementsByTagName("img");
 for (var item in images) {
     item.title = item.alt;
 }

OR (W3 DOM style)

 for (var item in images) {
     item.setAttribute("title", item.getAttribute("alt") );
 }

OR (jQuery)

 $("img").each( function() { this.attr("title", this.attr("alt") ); }

(haven't tested any of these yet, so slight modification may be needed)

Answer 4

Note that the user can suppress title attribute tooltips in Firefox by setting the advanced configuration parameter browser.chrome.toolbar_tips to false.

Answer 5

This jQuery tooltip script will take the contents of the title and display them in a tooltip (including HTML formatting). Although, it doesn't fix the IE bug of showing the alt text, you could add some script to clear the alt attribute after the page is loaded; but as stated before, this is a bad idea as it will not allow document readers to work as designed.