New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
[Tooltip] Use Pointer Events #564
Comments
Interesting, thanks for bringing this up. Have you tested this on touch by chance? I'm a little concerned about
I'm not sure if we want tooltips showing up on touch events. I think some stylus inputs have a detectable hover range, but for those that don't we'd probably need to account for that. I'm open to a PR that uses pointer events only when supported and falls back to mouse events, but I'd also want it to be tested well on touch devices. I can't promise I'll have time to deal with them myself right away, but I'm happy to help test if you want to get it started! |
Hmm, yes. You are correct. I tested this on an iPhone XS on Safari and the example above does indeed seem to respond to a This may not be what we want. |
It is possible to distinguish pointer types, so we could disable this for touch/pen events: https://developers.google.com/web/updates/2016/10/pointer-events#different_input_types |
Digging further, the reason why Mouse Events don't work on disabled elements is a misinterpretation of the spec:
The spec states that only click events should be prevented, but browsers seem to prevent all mouse events. Couldn't the browser just send events on disabled elements and let the developer take care of them? Yep. Pointer Events has addressed this problem by following the spec more closely and deliberately sending events on disabled elements. Context:
|
🚀 Feature request
Current Behavior
Using
@reach/tooltip
with disabled buttons is not possible. See: #231This is not specific to Reach UI, but rather a browser implementation detail, which can't be worked around without adding an additional wrapper around disabled buttons (which also has styling implications and is generally unpredictable).
Desired Behavior
Using
@reach/tooltip
with disabled buttons would be somewhat possible.Suggested Solution
I have experimented with using Pointer Events (not to be mistaken with CSS
pointer-events
property) and they seem to produce desired results.More specifically,
onPointerEnter
andonPointerLeave
seem to both be fired on disabled buttons. An example: https://codesandbox.io/s/gracious-galileo-qymqw?file=/src/App.jsI don't know what other implications this may have, or why do these events fire on disabled buttons, but it might be worth considering using said events instead of
onMouseEnter
/onMouseLeave
, especially sinceonMouseEnter
should not fire on disabled inputs as of React 16.13.0Who does this impact? Who is this for?
All users of Tooltip.
Describe alternatives you've considered
I know this can be done in user land with the
useTooltip
hook by mapping the mouse events to pointer events, and I'm not expecting Reach UI to do anything here — but I thought it would be something interesting to consider. I think it would be really cool to support disabled buttons out of the box (which is a surprisingly common use case).The text was updated successfully, but these errors were encountered: