Skip to content

Commit

Permalink
fix: stop tooltip from overflowing out of view in preview and deploye…
Browse files Browse the repository at this point in the history
…d mode. (#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 #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 -->
  • Loading branch information
jacquesikot authored Feb 24, 2025
1 parent 19816eb commit fc80866
Show file tree
Hide file tree
Showing 2 changed files with 8 additions and 1 deletion.
Original file line number Diff line number Diff line change
Expand Up @@ -104,6 +104,7 @@ describe(
);
agHelper.HoverElement(locators._tooltipIcon);
agHelper.AssertPopoverTooltip("Input tooltip");
agHelper.AssertCSS(locators._tooltipIcon, "overflow", "hidden");
agHelper.ClearNType(
locators._widgetInDeployed(draggableWidgets.INPUT_V2) + " textarea",
"test",
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -76,7 +76,13 @@ if (!portalContainer) {
function TooltipComponent(props: TooltipProps) {
const modifiers = useMemo(
() => ({
preventOverflow: { enabled: false },
preventOverflow: {
enabled: true,
boundariesElement: "viewport",
},
flip: {
enabled: true,
},
...props.modifiers,
}),
[props.modifiers],
Expand Down

0 comments on commit fc80866

Please sign in to comment.