Fire onmouseover event when element is disabled

Question

I have some controls that I need to disable when users don't have edit privileges, but are sometimes not wide enough to show the entire text of the selected option element. In which case I've added a tool tip with ASP.NET and the following code

ddl.Attributes.Add("onmouseover", "this.title=this.options[this.selectedIndex].title")

This works when the control is enabled, but doesn't work when it is disabled.

The following alert will not fire when a mouse is over the select element:

<select disabled="disabled" onmouseover="alert('hi');">
    <option>Disabled</option>
</select>

See this fiddle.

Q: Can I fire the onmouseover event for controls that are disabled?

Answer 1

Disabled elements do not fire events, e.g. users cannot hover or click them to trigger a popover (or tooltip). You can however wrap the disabled element with a DIV and listen to the event fired on that element instead.

Answer 2

Update: Please see nathan william's comment for some serious limitations to this approach. I've updated the fiddle to illustrate the problem areas more clearly.

---

Expanding on what @Diodeus said, you can use jQuery to automatically create the div container for you and wrap it around any disabled elements.

1. Use the :disabled selector to find all disabled elements.
2. Then call the .wrap() method with a function callback
3. You can use this to refer to the current element in the set.
4. Then use .attr() method to get the onmouseover value from the parent element and apply the same value to the new div.

$(':disabled').wrap(function() {
    return '<div onmouseover="' + $(this).attr('onmouseover') + '" />';
});

Demo in jsFiddle