Semantic-ui: [Popup] Tooltip should work with disabled buttons
Current behaviour
Popups, for instance pure CSS tooltips in particular, don't work with buttons that have a disabled class present.
Example: http://jsfiddle.net/fd9pnp3o/1/
Expected behaviour
It should be possible to add a tooltip also to a disabled button. A real use case is explaining why the button is not active.
nix1
All 3 comments
Now a technical remark:
This is caused by pointer-events: none; set on the button, so the :hover state is never activated.
Also, tooltips would receive the same opacity that the disabled button has, which might make the right solution more difficult.
A simple workaround for now is overriding pointer-events to auto and using and inline variant of the popup (so that it's not a child of the button). Unfortunately then the button receives a light but still undesirable hover effect.
nix1
on 17 Aug 2016
This has been discussed several times, see #3536, #4285, #4296.
larsbo
on 20 Aug 2016
Thanks for your answer. I see that wrapping the button in another element looks cleaner than overriding pointer-events.
However, it pretty much means that the tooltips should always go into the wrapper if the button can ever enter the disabled state. Perhaps it would make more sense to set proper color on the button instead of using opacity? You can take a look at http://jsfiddle.net/fd9pnp3o/2/ .
nix1
on 28 Aug 2016
Related issues
mixerp
路
3Comments
arj-196
路
3Comments
miguelmota
路
3Comments
Morrolan
路
3Comments
larsbo
路
3Comments
Most helpful comment
Thanks for your answer. I see that wrapping the button in another element looks cleaner than overriding
pointer-events.However, it pretty much means that the tooltips should always go into the wrapper if the button can ever enter the disabled state. Perhaps it would make more sense to set proper color on the button instead of using opacity? You can take a look at http://jsfiddle.net/fd9pnp3o/2/ .