feat: create Tooltip component #3441
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
brunohkbx
commented
Oct 27, 2022
brunohkbx
commented
Oct 27, 2022
|
Hello @brunohkbx, thanks for adding new component 🔥 I will answer your questions/comments in the upcoming days 🙌🏽 |
gbelgamo-godaddy
approved these changes
Oct 28, 2022
lukewalczak
reviewed
Oct 28, 2022
lukewalczak
reviewed
Oct 28, 2022
|
Hey @brunohkbx, thank you for your pull request 🤗. The documentation from this branch can be viewed here. |
|
The mobile version of example app from this branch is ready! You can see it here |
|
The mobile version of example app from this branch is ready! You can see it here |
lukewalczak
reviewed
Oct 31, 2022
lukewalczak
reviewed
Oct 31, 2022
lukewalczak
changed the title
|
The mobile version of example app from this branch is ready! You can see it here |
lukewalczak
approved these changes
Nov 14, 2022
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.
Summary
This PR implements the Tooltip component described here in MD2 docs.
Tooltips display informative text when users hover over, focus on, or tap an element.
When activated, tooltips display a text label identifying an element, such as a description of its function.
This covers only the minimum functionality to make it usable. Desktop support and animated Transitions described in MD docs are not implemented. Future work can be done and is welcome to support all use cases.
Test plan
Behavior
A tooltip is displayed upon tapping and holding a screen element or component (on mobile) or hovering over it (desktop). Continuously display the tooltip as long as the user long-presses or hovers over the element.
Timing
Display the tooltip for 1.5 seconds. If the user takes another action before that time ends, the tooltip will disappear.
Placement
The tooltip can overflow to the left / right or bottom depending on where the wrapped element is placed on the screen.
The purpose of the following test cases is to show that the tooltip text does not goes offscreen.
Overflow To Left
Overflow To Right
Overflow To Bottom
Normal placement
