Merge pull request #230 from reaviz/tooltip-scrool-issue

Fix tooltip position after scroll
reaviz · Jun 13, 2024 · d7b0606 · d7b0606
2 parents 1185cf8 + a61e684
commit d7b0606
Show file tree

Hide file tree

Showing 4 changed files with 15 additions and 15 deletions.
diff --git a/src/layers/Tooltip/Tooltip.tsx b/src/layers/Tooltip/Tooltip.tsx
@@ -1,6 +1,6 @@
 import React, { FC, useState, useRef, useEffect, ReactNode } from 'react';
 import { ConnectedOverlay, TriggerTypes } from '@/utils/Overlay';
-import { Placement, ReferenceObject } from '@/utils/Position';
+import { Modifiers, Placement, ReferenceObject } from '@/utils/Position';
 import { motion } from 'framer-motion';
 import { twMerge } from 'tailwind-merge';
 import { useTooltipState } from './useTooltipState';
@@ -56,7 +56,7 @@ export interface TooltipProps {
   /**
    * floating-ui modifiers.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * External setter for visibility.

diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlay.tsx
@@ -9,7 +9,7 @@ import React, {
   useMemo
 } from 'react';
 import { TriggerTypes, OverlayTrigger } from '@/utils/Overlay/OverlayTrigger';
-import { Placement, ReferenceProp } from '@/utils/Position';
+import { Modifiers, Placement, ReferenceProp } from '@/utils/Position';
 import { AnimatePresence } from 'framer-motion';
 import { OverlayContext } from '@/utils/Overlay/OverlayContext';
 import {
@@ -93,7 +93,7 @@ export interface ConnectedOverlayProps {
   /**
    * Position modifiers.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * Overlay should follow cursor or not.

diff --git a/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx b/src/utils/Overlay/ConnectedOverlay/ConnectedOverlayContent.tsx
@@ -9,7 +9,7 @@ import React, {
   LegacyRef
 } from 'react';
 import { useExitListener } from '@/utils/ExitListener';
-import { Placement, usePosition } from '@/utils/Position';
+import { Modifiers, Placement, usePosition } from '@/utils/Position';
 import { OverlayPortal, portals } from '@/utils/Overlay/OverlayPortal';
 import { useId } from '@/utils/useId';
 
@@ -21,7 +21,7 @@ export interface ConnectedOverlayContentProps {
   /**
    * Modifiers to adjust the behavior of the overlay content.
    */
-  modifiers?: any;
+  modifiers?: Modifiers;
 
   /**
    * If true, the overlay content will follow the cursor.

diff --git a/src/utils/Position/usePosition.tsx b/src/utils/Position/usePosition.tsx
@@ -62,7 +62,7 @@ export const usePosition = ({
   });
 
   useEffect(() => {
-    if (isVirtualElement && reference) {
+    if (isVirtualElement && reference && !followCursor) {
       const refObject = reference as ReferenceObject;
       refs.setPositionReference({
         getBoundingClientRect() {
@@ -79,22 +79,22 @@ export const usePosition = ({
         }
       });
     }
-  }, [reference, refs, isVirtualElement]);
+  }, [reference, refs, isVirtualElement, followCursor]);
 
   const onMouseMove = useCallback(
-    ({ pageX, pageY }: MouseEvent) => {
+    ({ clientX, clientY }: MouseEvent) => {
       // Virtual reference object for cursor position.
       refs.setPositionReference({
         getBoundingClientRect() {
           return {
             width: 0,
             height: 0,
-            x: pageX,
-            y: pageY,
-            left: pageX,
-            top: pageY,
-            right: pageX,
-            bottom: pageY
+            x: clientX,
+            y: clientY,
+            left: clientX,
+            top: clientY,
+            right: clientX,
+            bottom: clientY
           };
         }
       });