Hover event won't fire in firefox

Question

The following code shows a disabled textbox wrapped in a div with a jQuery UI tooltip attached to it. The jQuery tooltip will be shown properly in Chrome, Safari and IE when hovering the textbox (or, more precisely, the textbox covered div) but not in Firefox (28.0). Can somebody explain this behaviour and offer a fix? I know that event are generally not fired on disabled elements, so that's why it is bound to the wrapping div.

HTML:

foo
<div id="container" title="Tooltip test" 
     style="background: green; display: inline; position: relative; z-index: 10">
<input id="box" type="textbox" disabled="disabled" value="baz" 
       style="position: relative; z-index: 1"></input>
</div>
bar

JavaScript:

$("#container").tooltip();

Here is a jsfiddler

Instead of an answer,how about I redirect you to one-http://stackoverflow.com/questions/3100319/event-on-a-disabled-input — Ashutosh, Apr 17 '14 at 07:53

score 3 · Answer 1 · answered Apr 17 '14 at 08:04

3

I found a trick. you can use display:inline-block; and background:transparent; and add the trick which is padding:2px; to the #container div. and it will work the way you want ;)

http://jsfiddle.net/banded_krait/TAD2w/33/

answered Apr 17 '14 at 08:04

Mokhlesur Rahman

751
7
25

score 2 · Accepted Answer · answered Apr 17 '14 at 07:58

You are correct, disabled elements do not fire jQuery mouse events, and because of this, your tooltip is still not firing.

If you hover over the little green sliver on the right side of the textbox, it does fire. One solution to this is to move the textbox behind its container onDisabled.

input[disabled]
{
    z-index: -1;
}

Obviously, this has the limitation of the background needing to be transparent if you want to still see the element, however, it does work in firefox.

JSFiddle

score 0 · Answer 3 · answered Apr 17 '14 at 08:01

0

Solution:

type about:config in firefox address bar and press enter search for below option browser.chrome.toolbar_tips and toggle it. Go to "about:config" and toggle "browser.chrome.toolbar_tips" to "true".

Rahul

answered Apr 17 '14 at 08:01

rahul

3
4

Hover event won't fire in firefox

3 Answers3

JSFiddle