[Tooltip] Fix trackCursorAxis prop

atomiks · Oct 17, 2024 · 60e1021 · 60e1021
1 parent 7445aad
commit 60e1021
Show file tree

Hide file tree

Showing 3 changed files with 15 additions and 5 deletions.
diff --git a/docs/data/components/tooltip/tooltip.mdx b/docs/data/components/tooltip/tooltip.mdx
@@ -158,7 +158,7 @@ It automatically positions a wrapper element that can be styled or contain a cus
 
 ## Cursor following
 
-The tooltip can follow the cursor on both axes or one axis using the `followCursorAxis` prop on `Tooltip.Root`. Possible values are: `none` (default), `both`, `x`, or `y`.
+The tooltip can follow the cursor on both axes or one axis using the `trackCursorAxis` prop on `Tooltip.Root`. Possible values are: `none` (default), `both`, `x`, or `y`.
 
 <Demo demo="UnstyledTooltipFollowCursor" />
 

diff --git a/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts b/packages/mui-base/src/Tooltip/Positioner/useTooltipPositioner.ts
@@ -3,12 +3,15 @@ import type { Boundary, Padding, VirtualElement, FloatingRootContext } from '@fl
 import { mergeReactProps } from '../../utils/mergeReactProps';
 import { useAnchorPositioning } from '../../utils/useAnchorPositioning';
 import type { GenericHTMLProps } from '../../utils/types';
+import { useTooltipRootContext } from '../Root/TooltipRootContext';
 
 export function useTooltipPositioner(
   params: useTooltipPositioner.Parameters,
 ): useTooltipPositioner.ReturnValue {
   const { open = false, keepMounted = false, trackCursorAxis = 'none' } = params;
 
+  const { triggerElement } = useTooltipRootContext();
+
   const {
     positionerStyles,
     arrowStyles,
@@ -17,7 +20,10 @@ export function useTooltipPositioner(
     arrowUncentered,
     renderedSide,
     renderedAlignment,
-  } = useAnchorPositioning(params);
+  } = useAnchorPositioning({
+    ...params,
+    triggerElement,
+  });
 
   const getPositionerProps: useTooltipPositioner.ReturnValue['getPositionerProps'] =
     React.useCallback(

diff --git a/packages/mui-base/src/utils/useAnchorPositioning.ts b/packages/mui-base/src/utils/useAnchorPositioning.ts
@@ -47,6 +47,7 @@ interface UseAnchorPositioningParameters {
   mounted?: boolean;
   trackAnchor?: boolean;
   nodeId?: string;
+  triggerElement?: Element | null;
 }
 
 interface UseAnchorPositioningReturnValue {
@@ -86,6 +87,7 @@ export function useAnchorPositioning(
     arrowPadding = 5,
     mounted = true,
     trackAnchor = true,
+    triggerElement,
     nodeId,
   } = params;
 
@@ -210,10 +212,12 @@ export function useAnchorPositioning(
 
     if (resolvedAnchor) {
       const unwrappedElement = isRef(resolvedAnchor) ? resolvedAnchor.current : resolvedAnchor;
-      refs.setPositionReference(unwrappedElement);
-      registeredPositionReferenceRef.current = unwrappedElement;
+      if (unwrappedElement !== triggerElement) {
+        refs.setPositionReference(unwrappedElement);
+        registeredPositionReferenceRef.current = unwrappedElement;
+      }
     }
-  }, [refs, anchor]);
+  }, [refs, anchor, triggerElement]);
 
   React.useEffect(() => {
     // Refs from parent components are set after useLayoutEffect runs and are available in useEffect.