Reputation: 30237
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
?
Upvotes: 33
Views: 36860
Reputation: 5425
For modern browsers, you can use the pointerenter
and pointerleave
events instead. These fire even if the HTML Element is disabled
.
Upvotes: 5
Reputation: 21452
there are two solutions for this
<Tooltip title="Tooltip" placement="bottom">
<div>
<IconButton disabled>
<Done />
</IconButton>
</div>
</Tooltip>
or this one if you dont want miss the view
<Tooltip title="Tooltip" placement="bottom">
<IconButton component="div" disabled>
<Done />
</IconButton>
</Tooltip>
Upvotes: -1
Reputation: 114417
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.
Upvotes: 56
Reputation: 135
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/
Upvotes: 8
Reputation: 30237
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.
:disabled
selector to find all disabled elements..wrap()
method with a function callbackthis
to refer to the current element in the set..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') + '" />';
});
Upvotes: 10
Reputation: 1930
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.
Upvotes: 2
Reputation: 1120
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;
Upvotes: 1