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.