From d9a1838481cdd427a5a7e8a26103ecbe0f7293b3 Mon Sep 17 00:00:00 2001 From: Admir Husic Date: Tue, 25 Jun 2024 22:02:04 +0200 Subject: [PATCH] fix(Tooltip): Ensure tooltip stays within viewport boundaries - Added Popper.js modifiers to prevent tooltip from overflowing viewport edges - Enabled 'preventOverflow' to restrict tooltip within the viewport - Enabled 'flip' to automatically reposition tooltip if there is insufficient space - Docs: https://floating-ui.com/docs/flip#flip Resolves: #34445 --- .../design-system/widgets-old/src/Tooltip/index.tsx | 8 +++++++- 1 file changed, 7 insertions(+), 1 deletion(-) diff --git a/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx b/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx index d5af97850b03..7ada7f1ccb04 100644 --- a/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx +++ b/app/client/packages/design-system/widgets-old/src/Tooltip/index.tsx @@ -75,7 +75,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],