Where are my ALT tooltips in Firefox

March 11, 2005

I was wondering why Firefox doesn't show tooltips when you use the alt attribute in img tags like IE does. Turns out IE should not be displaying alt messages in tooltips, the title attribute is designed for that.

But don't stop using the alt attribute, thats required for accessibility. So your best bet is to include both an alt attribute, and a title attribute in your img tags if you want a tooltip. IE will show the title attribute value in the tooltip.

People say that displaying alt text in a tooltip is a bug in IE, but I would rather call it a feature!

Related Entries

78 people found this page useful, what do you think?


I am pretty sure I saw an extension for that! Unfortunately I can't find it.
As Bill notes, there's a bookmarklet for that -- just create a new bookmark and put this code in the "location" field all on one line): javascript:(function(){function altToTitle(d){for(var i=0;i<d.images.length;++i)if(d.images[i].title==%22%22)d.images[i].title=d.images[i].alt;}altToTitle(document);for(var f=0;f<parent.frames.length;++f)altToTitle(parent.frames[f].document);})(); This comes from http://nontroppo.org/test/Op7/FAQ/opera-users.html#alt-tooltip, but works in Moz & FF as well. Once it's there, just click on it whenever you run into an IE-only page, and it'll turn all the ALT text into Titles. Now if they would just quit truncating text and add a li'l word-wrapping . . . .
I'd say it's a bug. As you say, 'alt' is alternate text for the image. Since IE is displaying the image, the alternate text is irrelevant. If you have image display turned off, then the alt text should be listed where the image would ordinarily be. Since IE will correctly display the 'title', rather than the 'alt' if both are present, it's a bug that is pretty irrelevant (i.e. if you code it right, IE works right), so I don't know that anyone will complain too much.
"Two bugs don't make a feature..."
Hey, I just realized that neither Bill nor myself really explained what we were talking about -- which is a very handy hack for FF/Moz/Opera that allows them to show tooltips on pages that incorrectly use ALT text for that purpose (relying on the IE bug/feature).
IE's usage of alt is more of an invalid usage of the standard than a "bug".
if you specify both a 'title' and 'alt' attribute then it will display on both browsers. if 'title' in an image tag isn't working for you, then wrap the img in an anchor with a title attribute (it doesn't have to point anywhere). I assume since you want a tooltip that the image will be 'doing something', so it would be in an anchor anyway. if not, then create an anchor that is a specific id or class and tell the pointer to not change to an 'I'm over a link' pointer.
Thank you for this, it was helpful :)
The GreaseMonkey extrension has a quick fix for this: http://greasemonkey.mozdev.org/ ALT Tooltips for Firefox http://www.arantius.com/article/arantius/alt+tooltips+for+firefox/
http://www.w3.org/TR/1999/REC-html401-19991224/struct/objects.html#h-13.8 This is one of those vague rules: "For user agents that cannot display images, forms, or applets, this attribute specifies alternate text". I don't read this to mean "you *must not* render this text when an image can be displayed", though I would agree that it doesn't usually make sense to display both, particularly when it is commonly accepted that the title attribute was created for this purpose: "This attribute offers advisory information about the element for which it is set." Note the rest of the comments on the usage of alt and title on that page (and the equivalent in xhtml if you are reading that one too) -- very much worth reading. This is one of those choices the implementers of IE obviously chose to do one way while creators of other browsers have chosen to implement another (with perhaps a little more 20/20 vision clarity thanks to the passage of time).
This can be fixed pretty easily. Instead of using ALT attribute to display the tooltip for the image, use TITLE. i.e. just replace the 'alt' with 'title'. It would now work well for both Firefox and IE
Sreejith, you wouldn't want to replace the alt with title - you would want to put both the title and the alt text. Technically the alt text shold provide a brief description of the image as it is used for accessibility (screen readers, etc). If you can't provide a full and useful description of the image in the alt text you should use the longdesc attribute. Sorry I'm kind of rambling, but my point is you definitly do not want to remove the alt attribute in place of a title attribute. Using both is fine and if you can only use one use the alt.
Yes I agree with Bill - Sreejith you don't want to remove your alt attributes, this will effect screen readers, accessibility, and possibly even search engines.
Ha. This is great. In my digital media and web design class, my teacher seems to have this hatred of Firefox (even though she admits, she uses it as her web browser at home). Even though tooltips aren't vital, she places a lot of emphasis on them and thus, asks many of us to use the bain of our existence, IE. Of course, Firefox had never been installed on our computers until I made it my duty to put it on every PC I came in contact with. This should put a damper on my teachers Firefox-phobia. It's so nice when smart people publish their solutions online so the rest of us can get through everyday life easier:)
Thanks mate for the info! But I have been using only the TITLE attributes so far since I wanted to display the comment on mouse-over in Firefox too. Thanks for this!
ALT and TITLE serve different purposes. ALT is replacement test. TITLE is supplementary text. Replacement text might be something like, "Picture of our founder, Jane Public, standing in front of a bridge." Supplementary text might be something like, "Our founder, Jane Public." This becomes more noticeable if you have a headline or company logo in graphical form. You should repeat the headline or name in ALT for people using text browsers or with images turned off... but it doesn't serve any purpose to display a tooltip with that information. So in that case, you're best off putting text in ALT and using a blank TITLE. Writing text for the intended purposes results in a page that works cross-browser and is more accessible than picking one attribute over the other.
when title attribute is used in mozilla, tooltips is not shown properly, sometime it is shown out of boundry and sometime the tooltips of overlapped window is shown in front window, so anybody have any idea about this, plz email me or write reply in this blog itself.
I have the same problem whenever i put my cursor on any image who have alt tag Firefox didn't show the text as i try same on IE and its work great. Do you guys now how to activate or fix this issue in Firefox? Thanks Qasir Mehmood Tompako http://www.tompako.com.pk
Amazing, its more than 4 years later and the idiots at Firefox haven't gotten their finger out and fixed this shit because of their zealotry. It doesn't matter what the original intention was, now billions of websites and users are using ALT for this. So instead of actually doing what people want, the people behind cripplefox keeps sticking to their outdated notions.
Old post but information is still valid. Thanks for pointing out the Title attribute. I almost thought that there was something IE could do but FF couldn't. ;)
your wrong it is a feature in IE and IE does show the ailt text if image is missing.
There is nice "Popup ALT Attribute" add-on available for these purposes.
Thanks for this thread. I learnt something new.
I see your point, thinking the IE treatment of ALT is a convenience. However, you have to have an alt tag in order for your page to validate. But on some pages, if I use some custom tooltip javascript, then I don't want to use a title, because the browser will use it as a tooltip. Since IE says "whatever" and uses the alt tag as a tooltip... it goofs up the special tooltip JS. So, I have to break validation and not include alt tags, just so IE won't mess up my display. If IE stuck to the speck, I could leave out the title attribute, still validate, and be okay.
Thats very easy ! Don Panic my fellows! add 'title' tagproperty to your elements. Watever value you give to this tagproperty, it would be shown as tooltip both in firefox and IE. alt tag only works as tooltip in IE. Example ! <input name="text1" type="text" id="ID6" title="tooltip" />
Thanks for this tip...it solved my ff problem
Do the various extensions I've seen referred to on various forums actual make the client browser display the tooltip in Firefox, regardless of whether the page correctly used Alt when they should have use Title? I'm trying to find a solution where a cd-rom provides images that have hotspot zone specifiied --- and the "app" depends on the tooltip to pop-up with the correct information to identify an object within that zone. The program works properly on a Windows system using IE. On a Mac where there IS no IE browser, neither Safari nor Firefox will display the tooltip when you mouse over the zone. SO -- which extenstion to use?
I added the following script to my site's footer include file and now Firefox displays image ALT tooltips just like in IE: (function () { for (var i = 0; i < document.images.length; i++) { if (document.images[i].title == "") document.images[i].title = document.images[i].alt; } })();
Pol summarized it perfectly, Using both ALT and TITLE will work in the latest FF. No needed bookmarklet needed
I know this is an old thread, but I decided to google how to fix displaying alt tags in Firefox and came across this page.

I read the entire thread and the best and quickest solution was offered by David, just above. I popped in his little script in my footer and problem solved! No having to alter hundreds of images by adding 'title tag.' Every image on every page displays the alt tag in Firefox now. (Be sure to wrap it with script tags)

Thank you David!
Still I have problem in fixing image alt tags, its only displaying in the internet explorer not on Firefox.
I am the creator of Bambote.com the Perfect Homepage, How do i get the alt tag to work for firefox, it works for exsplorer but not firefox, any help???
Nice post thanks for sharing with us .
These tpoics are so confusing but this helped me get the job done.

Recent Entries