Inconsistent behaviour of default browser tooltip

I’ve had some spare time before bedtime to put into digital form something what I discussed with the guys at the office – inconsistent cross browser behavior of default tooltip functionality.

First, a little introduction to the subject of tooltips:

The tooltip is a common graphical user interface element. It is used in conjunction with a cursor, usually a mouse pointer. The user hovers the cursor over an item, without clicking it, and a tooltip may appear — a small “hover box” with information about the item being hovered over. (Wikipedia)

In your regular computer usage, you see tooltips every day (all day) and chances are that you don’t even notice them anymore. All browsers display the title attribute of an HTML element as a tooltip when a user hovers the mouse cursor over that element. Some browsers will also display the alt attribute of an image as a tooltip in the same manner (if a title attribute is also specified, it will override the alt attribute for tooltip content).

On the wide spaces of world wide web you can also find custom generated tooltips (eg. in javascript or Flash or just by absolutely positioning of elements via css), but they are not the subject of this post. I did my fair share of tooltips in different Flash projects I was working on, and each time we did a new tooltip type, we tried to make tooltips an integral part of visual part of design having in mind usability.

From user stand point – I never paid too much attention to browser tooltips. Probably because I got used to them. If website I am visiting is done well, if I hover something (probably an image) – a default browser tooltip will appear over that element. That usual and expected behavior was enough for me to put browser tooltips somewhere in back of mi mind. But, recently something about tooltips started to bother me and I couldn’t pinpoint it.

Just around the time when we were working on release of Globus portal, I finally did figure out what was wrong with tooltips – tooltips in Firefox to be exact.

Firefox (tested on 3.5.5) has a nasty bug which causes hovered element to fire up onmouseout event when you rollover a default browser tooltip which that element invoked. When you rollout of the tooltip (because tooltip disappears), the browser element fires onmouseover event again, and that can cause some really nasty behavior.

Firefox 3 tooltip bug
[flash http://www.nivas.hr/pub/default-browser-tooltip-bug/firefox.swf w=321 h=274]
(i’ve recorded this behaviour. you’ll need flash player to see the video. if you can’t – try MOV or AVI file.

On Globus that bug caused so much problem in elements which change layout when you hover them – that we had to remove title tags completely. And that from SEO standpoint is a BIG inconvenience. I’ve tested tooltips in all browsers, and AFAIK only Firefox 3.5 (Win) tooltips are “working” that way. I’ve submitted this bug to Bugzilla so will see what they’ll say about it.

While doing tests in browsers I had around (Firefox, Safari, Chrome and IE8), I’ve noticed another inconvenience. Not a single browser did not displaying the tooltip the same way.

I’ve put up a little html demo for you to test by your self (ignore my css ‘skills’). The ‘demo’ contains one div with image inside it with a link. If you hover the image, the link’s title will show up in a default browser tooltip. Take notice how tooltip:

1. appears when you roll over element
2. disappears when you roll out
3. behaves when you move around element
4. behaves when you try to rollover the tooltip it self

You will notice that not a single respected browser currently available on Windows is not displaying tooltip the same way.

Chrome 3 toolip
– lazy (shows and dissapears with an delay), you can rollover it with your mouse without any side effects. The fact that you can rollover tooltip in combination with rather long hide delay can be inconvenience.
[flash http://www.nivas.hr/pub/default-browser-tooltip-bug/chrome.swf w=321 h=274]
(MOV | AVI)

Internet Explorer 8 toolip
– pretty standard windows based tooltip behaviour. if you hover a tooltip – it will disappear which I think it’s best behavior.
– has a nasty habbit of blinking two times when you hover an element. it doesn’t produce other nasty effects to dom events
[flash http://www.nivas.hr/pub/default-browser-tooltip-bug/ie8.swf w=321 h=274]
(MOV | AVI)

Safari 4 toolip
– has a nasty habit of disappearing and reappearing while you are still hovering the element. it doesn’t produce other nasty effects to dom events
[flash http://www.nivas.hr/pub/default-browser-tooltip-bug/safari4.swf w=321 h=274]
(MOV | AVI)

I haven’t tested Opera on purpose. It’s market share is just too low. :-(

I have no idea why not a single web browser doesn’t have tooltip behavior configuration setting like follow mouse, delay in ms, different show/hide effects etc. I think that would be cool. :)

Feedback is welcome!