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?

Sturgeon

This is a bug of the Internet Explorer to show the alternative text as a tooltip. (Microsoft may call this a feature but the alternative text is only meant to be shown when the image cannot be displayed.) – Cheddite

Answer 1

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.

Perfoliate

i know but i don't want to repeat alt text as a title text again and want to show tooltip on mouse over in both browser. – Sturgeon

@Jitendra: You shouldn't be repeating the alt text for the title anyway. The alt text should be what you want users to see if they can't see the image, while title should be for tooltips. If you have both alt and title defined in your HTML, IE will use title for the tooltip. So if you want only one element for all modern browsers, use title, not alt! – Perfoliate

Answer 2

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.)

Personalize

did u just said that blind users can't see the image but they can see the specified Alt text? :o – Morrell

@Rakesh Juyal: Blind users will have screen reader software. Screen readers can read text, but not images. – Perfoliate

@Daniel: gr8 i never knew it thanx +1 – Morrell

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)

Floss

Reusing alt text for the title attribute is a bad idea for accessibility. There is virtually no case where the same text is appropriate for both. – Perfoliate

This was one of my first points to state when writing this answer, but I couldn't think of a good example. Could you provide one? :D – Floss

Jitendra post some code in the question and we'll do our best to help. :D – Floss

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.

Gallfly

But then you get no tooltips at all, which is not what the OP wants. – Perfoliate

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.

Cerebrate

i don't want to remove alt text from source. i want to use title text as a tooltip in all browsers – Sturgeon

Answer 6

Gordon's answer was helpful but the reason the jQuery didn't work is because this needs to be the object of a jQuery selector like so:

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

It was also missing the ) to close out the .each() function.

Gardie