[Tooltip] Use hysteresis with the enterDelay #18458
Merged
Conversation
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
oliviertassinari
added
new feature
oliviertassinari
changed the title
oliviertassinari
force-pushed
the
tooltip-delay-hysteresis
branch
from
abbad80
to
5fd5c5a
Compare
Details of bundle changes.Comparing: 508f9a3...4b8dd46
|
oliviertassinari
force-pushed
the
tooltip-delay-hysteresis
branch
from
5fd5c5a
to
4b8dd46
Compare
| assert.strictEqual(wrapper.find('[role="tooltip"]').exists(), false); | ||
| clock.tick(111); | ||
| wrapper.update(); | ||
| assert.strictEqual(wrapper.find('[role="tooltip"]').exists(), true); | ||
| }); | ||
|
|
||
| it('should use hysteresis with the enterDelay', () => { |
There was a problem hiding this comment.
@eps1lon Oh boy, it's in the contrast of this file that I truly realize how tests that are written with @test-library/react are much better than the ones we have with enzyme 👏. Being able to trigger real events makes all the difference.
|
This PR is a nice improvement. I want to add some comments about how I see tooltips (mainly to gather my thoughts). I'm not a fan of a fixed enter delay for "hover labels" to begin with. They contribute to poor discoverability (hover labels on unlabeled buttons are more convention than intuition (anecdotal from helping family members with computer stuff)). Compare it to the practice of using a different cursor for links. This is also a mechanism to signify an affordance ("clicking this area navigates") but has no delay at all. For buttons close to each other measuring acceleration might work just as well and would avoid making it seem like two buttons accross the screen are related by immediately showing the tooltip when e.g. moving from top left to bottom right. But this would obviously require extensive UX testing. I'll add reminder to experiment with a singleton tooltip that transitions (translate) between buttons instead of re-appearing between them. Especially toolbars can benefit quite a bit from this. |
2 tasks
3 tasks
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Add this suggestion to a batch that can be applied as a single commit.
This suggestion is invalid because no changes were made to the code.
Suggestions cannot be applied while the pull request is closed.
Suggestions cannot be applied while viewing a subset of changes.
Only one suggestion per line can be applied in a batch.
Add this suggestion to a batch that can be applied as a single commit.
Applying suggestions on deleted lines is not supported.
You must change the existing code in this line in order to create a valid suggestion.
Outdated suggestions cannot be applied.
This suggestion has been applied or marked resolved.
Suggestions cannot be applied from pending reviews.
Suggestions cannot be applied on multi-line comments.
Suggestions cannot be applied while the pull request is queued to merge.
Suggestion cannot be applied right now. Please check back later.
Based on https://twitter.com/ryanflorence/status/1196859248027635713, thanks @ryanflorence for sharing! The Material Design spec encourages a default value of
enterDelayof 0ms. However, people are very likely to customize this value. The support should be as good a the native tooltips.Before
After
