Skip to content

Commit df7591d

Browse files
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 changed

cypress/e2e/Regression/ClientSide/Widgets/Input/Input3_Spec.ts

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -104,6 +104,7 @@ describe(
104104
);
105105
agHelper.HoverElement(locators._tooltipIcon);
106106
agHelper.AssertPopoverTooltip("Input tooltip");
107+
agHelper.AssertCSS(locators._tooltipIcon, "overflow", "hidden");
107108
agHelper.ClearNType(
108109
locators._widgetInDeployed(draggableWidgets.INPUT_V2) + " textarea",
109110
"test",

packages/design-system/widgets-old/src/Tooltip/index.tsx

Lines changed: 7 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -76,7 +76,13 @@ if (!portalContainer) {
7676
function TooltipComponent(props: TooltipProps) {
7777
const modifiers = useMemo(
7878
() => ({
79-
preventOverflow: { enabled: false },
79+
preventOverflow: {
80+
enabled: true,
81+
boundariesElement: "viewport",
82+
},
83+
flip: {
84+
enabled: true,
85+
},
8086
...props.modifiers,
8187
}),
8288
[props.modifiers],

0 commit comments

Comments
 (0)