Fire onmouseover event when element is disabled

I know this is an old post, but hopefully this answer will clarify how @Diodeus answer can be implemented!

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

NOTE! Using onmouseover and onmouseout in the wrapper <DIV> will not work as expected in Chrome (v69). But will however work in IE. Which is why I recommend users to use onmouseenter and onmouseleave instead, which is working great both in IE and in Chrome.

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

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

I've put together a JS fiddle with some examples here: http://jsfiddle.net/Dr4co/tg6134ju/

Why can't you add a title on the target element? title looks like the same as tool tip. And title works on disabled elements.

when you set the value of your select, also set title:

element.value=value;
element.title = element.options[element.selectedIndex].text;

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

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.