Prevent tooltips from overflowing on the left or right side #9983
Conversation
a171fdf to
1a61a5f
Compare
1a61a5f to
89173d6
Compare
38d856b to
dda83f3
Compare
dda83f3 to
e128a64
Compare
e128a64 to
080cc2a
Compare
There was a problem hiding this comment.
Instead of checking this via fullscreen screenshots, wouldn't it be possible to check that the bounding box of the tooltip elements is within the bounds of the screensize?
There was a problem hiding this comment.
Great point, I have updated the tests and removed the snapshots again 👍
There was a problem hiding this comment.
What is the reason why this isn't dealt with the library used by baseweb? I assume it might be related to the parent element boundaries. Wouldn't the usage of the ignoreBoundary argument solve this?
There was a problem hiding this comment.
It looks like it might solve the issue on the right-side overflow, but not on the left-side overflow. Hence, I thought that just calculating it for both might be more consistent instead of setting a flag that somehow fixes the one but not the other, which still needs calculation.
But let me know if you think about this differently. Happy to remove the right-side overflow calculation again and setting the flag.
839e172 to
08518ce
Compare
|
|
||
| const overflowRight = | ||
| xCoordinate + boundingClientRect.width - window.innerWidth | ||
| const parentsParentElement = parentElement.parentElement |
There was a problem hiding this comment.
Maybe add a comment here why we need to get the parentsParent here
There was a problem hiding this comment.
Added a comment!
…t#9983) ## Describe your changes This PR prevents tooltips to overflow on the left or right side. ## GitHub Issue Link (if applicable) Closes streamlit#9288 Closes streamlit#9452 ## Testing Plan - E2E Tests - Added e2e test taking a screenshot of tooltips that previously were cut off. --- **Contribution License Agreement** By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.
Describe your changes
This PR prevents tooltips to overflow on the left or right side.
Before:
After:
GitHub Issue Link (if applicable)
Closes #9288
Closes #9452
Testing Plan
Contribution License Agreement
By submitting this pull request you agree that all contributions to this project are made under the Apache 2.0 license.