Mike Scott Mike Scott - 1 year ago 93
HTML Question

Does jQuery not fire hover event on a disabled button?

I'm implementing a form, whereby I'm wanting to disable a

and show a tooltip explaining why it's disabled on hover. However when a
is disabled the tooltip does not show.

I've added a test case here, reproducing with just jQuery: http://jsfiddle.net/BYeFJ/1/

It seems that jQuery is not firing the event, or is the browser not firing the hover event?

I'm using Twitter Bootstrap's Tooltip Module and of course, jQuery.

NB: I've also tried this with a wrapper around the button - but it swallows the hover state it seems, and I've also tried using an
element, to the same effect.

Answer Source

You could put a transparent overlay over the button and put the tooltip on that.


<div id="wrapper">
    <div id="overlay"></div>                
    <button disabled>BUTTON</button>

    position: relative;   
    position: absolute;        
    top: 0;
    left: 0;

    opacity: .1;
    height: 20px;
    width: 70px;

In the fiddle, I set the color to blue just so you can see what's going on. The width and height of the overlay can be adjusted as needed or made dynamic in js.

Recommended from our users: Dynamic Network Monitoring from WhatsUp Gold from IPSwitch. Free Download