Fire onmouseover event when element is disabled
Solution 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.
Solution 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.
- Use the
:disabled
selector to find all disabled elements. - Then call the
.wrap()
method with a function callback - You can use
this
to refer to the current element in the set. - Then use
.attr()
method to get theonmouseover
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
Solution 3
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/
Solution 4
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;
Solution 5
I know this is an old post, but in chrome you can set css property pointer-events to all and it should allow for events. I haven't checked in other browsers.
button[disabled] {
pointer-events: all;
}
Edit:
Actually I think setting the property to auto is sufficient. As @KyleMit commented, support it's pretty good.
I just used this in project where I needed to disable an button until some validation rules where met, but I also needed to trigger the validation on hover over the button. So adding the pointer-events did the trick. I think it's the easiest way get over the problem stated in the OP.
Related videos on Youtube
KyleMit
I've been writing software for the last decade or so at StackOverflow, DealerPolicy, the Vermont Department of Health, code camps, meetups, and online. I'm primarily focused on web dev, react, dotnet, and azure, but always in the mood to debug something new. Favorite SO Accomplishments: 67k+ rep given away via bounties - currently 1st of all time twitter-bootstrap - 3rd person to get the Gold Badge Socratic - Asked a well-received question on 100 separate days Sportsmanship - Up vote 100 answers on questions where an answer of yours has a positive score Refiner - Edit and answer 50 questions
Updated on July 09, 2022Comments
-
KyleMit almost 2 years
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 aredisabled
?-
danronmoon over 2 yearsDisabled button counter in Fiddle is firing for me Chrome 93 and Firefox 91. Here's with alert (works in Firefox 91 but not Chrome 93): jsfiddle.net/7hqL2f1a/1
-
-
KyleMit over 8 yearsJustin, that's one way to go (which I think I might have ultimately gone with) - the problem is that there are a lot of selects that are conditionally disabled. I needed the mouseover so the title would update appropriately when it wasn't disabled. But seeding it with the correct title to start covers both cases.
-
Justin over 8 yearsTo Kylemit, then you can add condition for it: if(element.classList.contains("addTitle15")){ // add title
-
Nathan Williams about 7 yearsShould be noted that there's still a dead zone over the disabled element itself. If the wrapper has block style, then the effect will be erratic; if it has inline style, then the mouse may never transit any part of it to trigger the effect. A z-index overlay element would behave more consistently, but would require inserting a sibling element with absolute positioning relative to the wrapper.
-
mikewasmike almost 7 yearscould you please demonstrate
-
Michael S. Miller about 4 yearsIt appears that if the disabled element takes up 100% of the div, even this won't work
-
Christian Jensen over 3 yearsThis does not work at all for me, whether I use
all
orauto
. -
Petra1999 over 3 yearsDo this and use "mouseenter" instead of "mouseover" and it will work.
-
Chris Pink about 3 yearsTrouble is you lose the HTML 'not-allowed' cursor snf the pointer cursor once the button is enabled
-
Greg Venech almost 3 yearsThanks for adding this answer. In the latest version of Chrome,
onmouseenter
did work as a replacement foronmouseover
withdisabled
children butonmouseleave
did not work as a replacement foronmouseout
. Due to theonmouseleave
issue, I still had to add a::before
pseudo-element to the wrapper positioned on top of thedisabled
child in order to getonmouseover
oronmouseleave
to fire.