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.
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>
</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.