Tooltips (title=“…”) won't show in Firefox

Question

I have an element with a title attribute (i.e., a tooltip), wrapped in some container:

<div id="foo">
    <input type="text" title="A tooltip" />
</div>

and I attach a "mousemove" event listener on the container and stop event propagation:

document.getElementById('foo').addEventListener(
    'mousemove',
    function(e) { e.stopPropagation() },
    false
)

This combination of stopping propagation of "mousemoves" on the container now prevents the tooltip from showing up for the inner textbox, in Firefox 2 and upwards. I've tried FF 2[.0.0.20], 3[.0.11], and the latest 3.5 (Windows Server 2003, XP).

As a quick exercise, Firefox users can see this bug in action by running the following equivalent logic as above in your address bar:

javascript:void($('div.vote').mousemove(function(e){ e.stopPropagation() }))

Now mouseover any of the vote up, vote down, or star (favorites) icons for this question. The tooltips no longer appear. Again, in Firefox only.

Does anyone have a workaround for this behavior/bug in Firefox? Has anyone else witnessed this?

Update: It appears Firefox uses "mouse stopped moving" to trigger tooltips in the browser chrome (eg back/forward buttons). See https://bugzilla.mozilla.org/show_bug.cgi?id=82953. However I can't tell if this affects the DOM.

Update: It appears Firefox 10 was the last version exhibiting this behavior. Firefox 11.0 and onwards shows tooltips regardless of event propagation.

Update: Firefox 33(.1) no longer exhibits this behavior.

Answer 1

I've confirmed this issue. I even tried propagating the event by hand to only the input box using this code:

<div id="foo" title="A tooltip 2"> <input title="A tooltip" type="text" id="bar"/>
</div>
<script type="text/javascript">
document.getElementById('foo').addEventListener(
    'mouseover',
    function(e) {
        e.stopPropagation();
        if (document.createEvent) {
            var inputBox = document.getElementById('bar');
            var evt = document.createEvent("MouseEvents");
            evt.initMouseEvent("mousemove", true, true, window, e.detail, e.screenX, e.screenY, e.clientX, e.clientY, false, false, false, false, null, null);
            inputBox.dispatchEvent(evt);
        }
    },
    false
)
</script>

No dice. However, other mouse events, including mouseover, seem to work fine.

I believe this is a bug. Although it isn't listed in bugzilla, a search does seem to indicate a correlation between the event "mouseover" and tooltips.

You might download the latest nightly build of Firefox here and see if it still is there. If it is, file a bug.

As an alternative, I would see if mouseover might give you the desired effect.

Answer 2

I recently read that some firefox addOns (i.e. google toolbar) result in problems with the title-tooltips. Deactivate them and check if this solves your issue.