[Tooltip] Fix tooltip position (#35909)

mui · Jan 30, 2023 · d28f2f6 · d28f2f6
1 parent 212585b
commit d28f2f6
Show file tree

Hide file tree

Showing 2 changed files with 12 additions and 12 deletions.
diff --git a/packages/mui-joy/src/Tooltip/Tooltip.tsx b/packages/mui-joy/src/Tooltip/Tooltip.tsx
@@ -172,6 +172,7 @@ const TooltipArrow = styled('span', {
 
 let hystersisOpen = false;
 let hystersisTimer: ReturnType<typeof setTimeout> | null = null;
+let cursorPosition = { x: 0, y: 0 };
 
 export function testReset() {
   hystersisOpen = false;
@@ -463,7 +464,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     open = false;
   }
 
-  const positionRef = React.useRef({ x: 0, y: 0 });
   const popperRef = React.useRef(null);
 
   const handleMouseMove = (event: React.MouseEvent<HTMLElement>) => {
@@ -472,7 +472,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
       childrenProps.onMouseMove(event);
     }
 
-    positionRef.current = { x: event.clientX, y: event.clientY };
+    cursorPosition = { x: event.clientX, y: event.clientY };
 
     if (popperRef.current) {
       (popperRef.current as { update: () => void }).update();
@@ -565,10 +565,10 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
         ? {
             getBoundingClientRect: () =>
               ({
-                top: positionRef.current.y,
-                left: positionRef.current.x,
-                right: positionRef.current.x,
-                bottom: positionRef.current.y,
+                top: cursorPosition.y,
+                left: cursorPosition.x,
+                right: cursorPosition.x,
+                bottom: cursorPosition.y,
                 width: 0,
                 height: 0,
               } as DOMRect),

diff --git a/packages/mui-material/src/Tooltip/Tooltip.js b/packages/mui-material/src/Tooltip/Tooltip.js
@@ -212,6 +212,7 @@ const TooltipArrow = styled('span', {
 
 let hystersisOpen = false;
 let hystersisTimer = null;
+let cursorPosition = { x: 0, y: 0 };
 
 export function testReset() {
   hystersisOpen = false;
@@ -502,7 +503,6 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
     open = false;
   }
 
-  const positionRef = React.useRef({ x: 0, y: 0 });
   const popperRef = React.useRef();
 
   const handleMouseMove = (event) => {
@@ -511,7 +511,7 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
       childrenProps.onMouseMove(event);
     }
 
-    positionRef.current = { x: event.clientX, y: event.clientY };
+    cursorPosition = { x: event.clientX, y: event.clientY };
 
     if (popperRef.current) {
       popperRef.current.update();
@@ -680,10 +680,10 @@ const Tooltip = React.forwardRef(function Tooltip(inProps, ref) {
           followCursor
             ? {
                 getBoundingClientRect: () => ({
-                  top: positionRef.current.y,
-                  left: positionRef.current.x,
-                  right: positionRef.current.x,
-                  bottom: positionRef.current.y,
+                  top: cursorPosition.y,
+                  left: cursorPosition.x,
+                  right: cursorPosition.x,
+                  bottom: cursorPosition.y,
                   width: 0,
                   height: 0,
                 }),