Track window resize to reposition tooltip

package.json

@@ -59,7 +59,6 @@
     "@types/css-modules": "^1.0.2",
     "@types/jest": "29.4.0",
     "@types/node": "^18.15.3",
-    "@types/react": "18.0.28",
     "@types/react-dom": "18.0.11",
     "@types/react-test-renderer": "^18.0.0",
     "@typescript-eslint/eslint-plugin": "5.54.0",
@@ -125,6 +124,7 @@
   },
   "dependencies": {
     "@floating-ui/dom": "^1.0.0",
+    "@types/react": "^18.2.17",
     "classnames": "^2.3.0"
   }
 }

src/components/Tooltip/Tooltip.tsx

@@ -3,6 +3,7 @@ import classNames from 'classnames'
 import debounce from 'utils/debounce'
 import { useTooltip } from 'components/TooltipProvider'
 import useIsomorphicLayoutEffect from 'utils/use-isomorphic-layout-effect'
+import { autoUpdate } from '@floating-ui/dom'
 import { getScrollParent } from 'utils/get-scroll-parent'
 import { computeTooltipPosition } from 'utils/compute-positions'
 import coreStyles from './core-styles.module.css'
@@ -290,6 +291,51 @@ const Tooltip = ({
   // mouse enter and focus events being triggered toggether
   const debouncedHandleShowTooltip = debounce(handleShowTooltip, 50, true)
   const debouncedHandleHideTooltip = debounce(handleHideTooltip, 50, true)
+  const updateTooltipPosition = () => {
+    if (position) {
+      // if `position` is set, override regular and `float` positioning
+      handleTooltipPosition(position)
+      return
+    }
+
+    if (float) {
+      if (lastFloatPosition.current) {
+        /*
+          Without this, changes to `content`, `place`, `offset`, ..., will only
+          trigger a position calculation after a `mousemove` event.
+
+          To see why this matters, comment this line, run `yarn dev` and click the
+          "Hover me!" anchor.
+        */
+        handleTooltipPosition(lastFloatPosition.current)
+      }
+      // if `float` is set, override regular positioning
+      return
+    }
+
+    computeTooltipPosition({
+      place,
+      offset,
+      elementReference: activeAnchor,
+      tooltipReference: tooltipRef.current,
+      tooltipArrowReference: tooltipArrowRef.current,
+      strategy: positionStrategy,
+      middlewares,
+      border,
+    }).then((computedStylesData) => {
+      if (!mounted.current) {
+        // invalidate computed positions after remount
+        return
+      }
+      if (Object.keys(computedStylesData.tooltipStyles).length) {
+        setInlineStyles(computedStylesData.tooltipStyles)
+      }
+      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
+        setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
+      }
+      setActualPlacement(computedStylesData.place as PlacesType)
+    })
+  }
 
   useEffect(() => {
     const elementRefs = new Set(anchorRefs)
@@ -315,8 +361,20 @@ const Tooltip = ({
       anchorScrollParent?.addEventListener('scroll', handleScrollResize)
       tooltipScrollParent?.addEventListener('scroll', handleScrollResize)
     }
+    let updateTooltipCleanup: null | (() => void) = null
     if (closeOnResize) {
       window.addEventListener('resize', handleScrollResize)
+    } else if (activeAnchor && tooltipRef.current) {
+      updateTooltipCleanup = autoUpdate(
+        activeAnchor as HTMLElement,
+        tooltipRef.current as HTMLElement,
+        updateTooltipPosition,
+        {
+          ancestorResize: true,
+          elementResize: true,
+          layoutShift: true,
+        },
+      )
     }
 
     const handleEsc = (event: KeyboardEvent) => {
@@ -377,6 +435,8 @@ const Tooltip = ({
       }
       if (closeOnResize) {
         window.removeEventListener('resize', handleScrollResize)
+      } else {
+        updateTooltipCleanup?.()
       }
       if (shouldOpenOnClick) {
         window.removeEventListener('click', handleClickOutsideAnchors)
@@ -476,52 +536,6 @@ const Tooltip = ({
     }
   }, [id, anchorSelect, activeAnchor])
 
-  const updateTooltipPosition = () => {
-    if (position) {
-      // if `position` is set, override regular and `float` positioning
-      handleTooltipPosition(position)
-      return
-    }
-
-    if (float) {
-      if (lastFloatPosition.current) {
-        /*
-          Without this, changes to `content`, `place`, `offset`, ..., will only
-          trigger a position calculation after a `mousemove` event.
-
-          To see why this matters, comment this line, run `yarn dev` and click the
-          "Hover me!" anchor.
-        */
-        handleTooltipPosition(lastFloatPosition.current)
-      }
-      // if `float` is set, override regular positioning
-      return
-    }
-
-    computeTooltipPosition({
-      place,
-      offset,
-      elementReference: activeAnchor,
-      tooltipReference: tooltipRef.current,
-      tooltipArrowReference: tooltipArrowRef.current,
-      strategy: positionStrategy,
-      middlewares,
-      border,
-    }).then((computedStylesData) => {
-      if (!mounted.current) {
-        // invalidate computed positions after remount
-        return
-      }
-      if (Object.keys(computedStylesData.tooltipStyles).length) {
-        setInlineStyles(computedStylesData.tooltipStyles)
-      }
-      if (Object.keys(computedStylesData.tooltipArrowStyles).length) {
-        setInlineArrowStyles(computedStylesData.tooltipArrowStyles)
-      }
-      setActualPlacement(computedStylesData.place as PlacesType)
-    })
-  }
-
   useEffect(() => {
     updateTooltipPosition()
   }, [show, activeAnchor, content, externalStyles, place, offset, positionStrategy, position])

src/utils/debounce.ts

@@ -5,7 +5,7 @@
  * @param { number } 		wait				Time to wait before execut the function
  * @param { boolean } 	immediate		Param to define if the function will be executed immediately
  */
-const debounce = (func: (...args: any[]) => void, wait?: number, immediate?: true) => {
+const debounce = (func: (...args: any[]) => void, wait?: number, immediate?: boolean) => {
   let timeout: NodeJS.Timeout | null = null
 
   return function debounced(this: typeof func, ...args: any[]) {