feat(components): add option to disable flipping of hte tooltip

trezor · Mar 6, 2025 · efba440 · efba440
1 parent f4dc6a7
commit efba440
Show file tree

Hide file tree

Showing 2 changed files with 17 additions and 6 deletions.
diff --git a/packages/components/src/components/Tooltip/Tooltip.tsx b/packages/components/src/components/Tooltip/Tooltip.tsx
@@ -71,6 +71,7 @@ type TooltipUiProps = {
     appendTo?: HTMLElement | null | MutableRefObject<HTMLElement | null>;
     zIndex?: ZIndexValues;
     isInline?: boolean;
+    disableFlip?: boolean;
 } & AllowedFrameProps;
 
 export type ManagedTooltipProps = ManagedModeProps & TooltipUiProps & TooltipBoxProps;
@@ -101,6 +102,7 @@ export const Tooltip = ({
     appendTo,
     shift,
     zIndex = zIndices.tooltip,
+    disableFlip = false,
     ...rest
 }: TooltipProps) => {
     const frameProps = pickAndPrepareFrameProps(rest, allowedTooltipFrameProps);
@@ -121,6 +123,7 @@ export const Tooltip = ({
                 offset={offset}
                 shift={shift}
                 delay={delayConfiguration}
+                disableFlip={disableFlip}
             >
                 <TooltipTrigger>
                     <Content

diff --git a/packages/components/src/components/Tooltip/TooltipFloatingUi.tsx b/packages/components/src/components/Tooltip/TooltipFloatingUi.tsx
@@ -54,6 +54,7 @@ interface TooltipOptions {
     offset: number;
     shift?: ShiftOptions;
     delay: Delay;
+    disableFlip?: boolean;
 }
 
 type UseTooltipReturn = ReturnType<typeof useInteractions> & {
@@ -71,6 +72,7 @@ export const useTooltip = ({
     offset: offsetValue,
     delay,
     shift,
+    disableFlip = false,
 }: TooltipOptions): UseTooltipReturn => {
     const arrowRef = useRef<SVGSVGElement>(null);
     const [isUncontrolledTooltipOpen, setIsUncontrolledTooltipOpen] = useState(isInitiallyOpen);
@@ -79,17 +81,23 @@ export const useTooltip = ({
     const open = isActive === false ? false : isControlledOpen ?? isUncontrolledTooltipOpen;
     const setOpen = setControlledOpen ?? setIsUncontrolledTooltipOpen;
 
+    const middleware = useMemo(() => {
+        const middlewareArray = [
+            offset(offsetValue),
+            ...(!disableFlip ? [flip()] : []),
+            shiftFloatingUI(shift),
+            arrow({ element: arrowRef }),
+        ];
+
+        return middlewareArray;
+    }, [offsetValue, shift, disableFlip, arrowRef]);
+
     const data = useFloating({
         placement,
         open,
         onOpenChange: setOpen,
         whileElementsMounted: autoUpdate,
-        middleware: [
-            offset(offsetValue),
-            flip(),
-            shiftFloatingUI(shift),
-            arrow({ element: arrowRef }),
-        ],
+        middleware,
     });
 
     const { context } = data;