Mike Scott Mike Scott - 1 year ago 72
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.