Mike Scott Mike Scott - 1 month ago 9
HTML Question

Does jQuery not fire hover event on a disabled button?

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

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.

Comments