Greatly improve the tooltip component #3987
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
ivarnakken
added
enhancement
ABA-226 Fix Tooltip
There are multiple issues with it:
|
ivarnakken
changed the title
ivarnakken
force-pushed
the
ivarnakken/aba-226-fix-tooltip
branch
3 times, most recently
from
097305e
to
23d1220
Compare
eikhr
approved these changes
Jun 10, 2023
There was a problem hiding this comment.
I don't love adding more dependencies, but it might be worth it in this case. It works significantly better than before, and the code is way simpler. Looks great!
I think it might be worth keeping the possibility to override the popover position though, f.ex. on the event attendees I think it looks better with the popover over the profile picture.
ivarnakken
added
technical-debt
ivarnakken
force-pushed
the
ivarnakken/aba-226-fix-tooltip
branch
from
23d1220
to
8ff56e3
Compare
It is now no longer super buggy! Firstly it will not overflow out of view when there is no space. Through the `popper` library, it will find the most suitable postion. No more need for the `renderDirection` prop and hacky calculations. Another nice feature is that it will point to the right direction even when the trigger component is flexed, which it often is. This is most noticeable on tables. Some minor styling changes as well, but that's not really the important part of this change. Worth noting that there is no longer an annoying buggy line between the arrow and the tooltip whenever there's a bad render.
ivarnakken
force-pushed
the
ivarnakken/aba-226-fix-tooltip
branch
from
8ff56e3
to
0bccb78
Compare
ivarnakken
added
ready-to-merge
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.
Description
It is now no longer super buggy!
Firstly it will not overflow out of view when there is no space.
Through the
popperlibrary, it will find the most suitable postion.No more need for the
renderDirectionprop and hacky calculations.Another nice feature is that it will point to the right direction even
when the trigger component is flexed, which it often is. This is most
noticeable on tables.
Some minor styling changes as well, but that's not really the important
part of this change. Worth noting that there is no longer an annoying
buggy line between the arrow and the tooltip whenever there's a bad
render.
Result
Screen.Recording.2023-06-09.at.18.33.37.mov
Testing
Went through all uses of tooltips. Tried all viewports, hard refreshes and other "stress testing".
Resolves webkom/lego#2849