Commit df7591d
authored
fix: stop tooltip from overflowing out of view in preview and deployed mode. (appsmithorg#39159)
### Problem
Tooltips in the application were overflowing out of the viewport,
causing them to be partially or completely hidden.
### Why This is Happening
The preventOverflow modifier was disabled, and the flip modifier was not
enabled in the Tooltip component, leading to improper positioning of
tooltips.
### Solution
- Enabled the preventOverflow modifier and set its boundary to the
viewport.
- Enabled the flip modifier to ensure better positioning of tooltips.
- Added a CSS assertion in the Input widget tests to verify that the
tooltip icon has an overflow property set to "hidden".
### Why This is the Best Solution
Enabling these modifiers ensures that tooltips adjust dynamically to
remain fully on-screen, improving the user experience by making tooltips
consistently visible. The additional test assertion helps maintain the
integrity of the tooltip icon's CSS properties.
Fixes appsmithorg#34445
## Automation
/ok-to-test tags="@tag.All"
### 🔍 Cypress test results
<!-- This is an auto-generated comment: Cypress test results -->
> [!TIP]
> 🟢 🟢 🟢 All cypress tests have passed! 🎉 🎉 🎉
> Workflow run:
<https://github.com/appsmithorg/appsmith/actions/runs/13305105052>
> Commit: 1f20716
> <a
href="https://internal.appsmith.com/app/cypress-dashboard/rundetails-65890b3c81d7400d08fa9ee5?branch=master&workflowId=13305105052&attempt=1"
target="_blank">Cypress dashboard</a>.
> Tags: `@tag.All`
> Spec:
> <hr>Thu, 13 Feb 2025 11:33:13 UTC
<!-- end of auto-generated comment: Cypress test results -->
## Communication
Should the DevRel and Marketing teams inform users about this change?
- [ ] Yes
- [ ] No
<!-- This is an auto-generated comment: release notes by coderabbit.ai
-->
## Summary by CodeRabbit
## Summary by CodeRabbit
- **New Features**
- Enhanced tooltip behavior improves positioning and visibility by
ensuring tooltips adjust dynamically to remain fully on-screen.
- **Tests**
- Added assertions to validate tooltip appearance and behavior in the
InputV2 widget tests.
<!-- end of auto-generated comment: release notes by coderabbit.ai -->1 parent c29df33 commit df7591d
File tree
2 files changed
+8
-1
lines changed- cypress/e2e/Regression/ClientSide/Widgets/Input
- packages/design-system/widgets-old/src/Tooltip
2 files changed
+8
-1
lines changedLines changed: 1 addition & 0 deletions
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
104 | 104 | | |
105 | 105 | | |
106 | 106 | | |
| 107 | + | |
107 | 108 | | |
108 | 109 | | |
109 | 110 | | |
| |||
| Original file line number | Diff line number | Diff line change | |
|---|---|---|---|
| |||
76 | 76 | | |
77 | 77 | | |
78 | 78 | | |
79 | | - | |
| 79 | + | |
| 80 | + | |
| 81 | + | |
| 82 | + | |
| 83 | + | |
| 84 | + | |
| 85 | + | |
80 | 86 | | |
81 | 87 | | |
82 | 88 | | |
| |||
0 commit comments