CODEWITHSUNDEEP
javascriptjqueryhtmlcssfirefox
dmb
dmb

Reputation: 267

Hover event won't fire in firefox

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

Upvotes: 0

Views: 424

Answers (3)

Mokhlesur Rahman
Mokhlesur Rahman

Reputation: 761

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/

Upvotes: 3

rahul
rahul

Reputation: 3

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

Upvotes: 0

Liftoff
Liftoff

Reputation: 25372

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

Upvotes: 2

Related Questions