Does jQuery not fire hover event on a disabled button?

Question

I'm implementing a form, whereby I'm wanting to disable a button and show a tooltip explaining why it's disabled on hover. However when a button 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 input element, to the same effect.

Answer 1

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

http://jsfiddle.net/yL2wN/

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

---

#wrapper{
    position: relative;   
}
#overlay{
    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.

Answer 2

One possible solution is to make it ready only:

<button id="disabledbutton" readonly="readonly">Disabled Button</button>

Then change the css to look disabled and override the onclick to prevent any action:

$('#disabledbutton').click(function() { return false; } );