Do you know, you can’t bind mouse events to a input element once it is disabled?

Recently I came across a situation where I had to show a tooltip on mouseover of a disabled button, specifying the reason why it is disabled. For that I tried binding onmouseover event to the button and failed in doing so, after a bit of searching I came to know that we cannot bind any mouse events to a disabled element as shown in below embedded fiddle.

To solve this problem I came up with two approaches.

  1. Wrapping the input element inside a parent element: We can wrap our disabled input element inside a parent element and bind events on the parent element as shown in below embedded fiddle.

  2. Making the element look like a disabled one through css by doing so we will be able to bind mouse events to the element as shown in below embedded fiddle.

So by using any of the above mentioned approaches we can bind mouse events to a disabled element.