feat: add float mode (follow mouse)

Author: gabrieljablonski

src/App.tsx

@@ -43,6 +43,7 @@ function App() {
   const [anchorId, setAnchorId] = useState('button')
   const [isDarkOpen, setIsDarkOpen] = useState(false)
   const [position, setPosition] = useState<IPosition>({ x: 0, y: 0 })
+  const [toggle, setToggle] = useState(false)
 
   const handlePositionClick: React.MouseEventHandler<HTMLDivElement> = (event) => {
     const x = event.clientX
@@ -122,21 +123,45 @@ function App() {
       <TooltipProvider>
         <WithProviderMultiple />
       </TooltipProvider>
-      <div
-        id="onClickAnchor"
-        className={styles['on-click-anchor']}
-        onClick={(event) => {
-          handlePositionClick(event)
-        }}
-      >
-        Click me!
+      <div style={{ display: 'flex', gap: '12px', flexDirection: 'row' }}>
+        <div>
+          <div
+            id="floatAnchor"
+            className={styles['big-anchor']}
+            onClick={() => {
+              setToggle((t) => !t)
+            }}
+          >
+            Hover me!
+          </div>
+          <Tooltip
+            anchorId="floatAnchor"
+            content={
+              toggle
+                ? 'This is a float tooltip with a very very large content string'
+                : 'This is a float tooltip'
+            }
+            float
+          />
+        </div>
+        <div>
+          <div
+            id="onClickAnchor"
+            className={styles['big-anchor']}
+            onClick={(event) => {
+              handlePositionClick(event)
+            }}
+          >
+            Click me!
+          </div>
+          <Tooltip
+            anchorId="onClickAnchor"
+            content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
+            events={['click']}
+            position={position}
+          />
+        </div>
       </div>
-      <Tooltip
-        anchorId="onClickAnchor"
-        content={`This is an on click tooltip (x:${position.x},y:${position.y})`}
-        events={['click']}
-        position={position}
-      />
     </main>
   )
 }

src/components/Tooltip/Tooltip.tsx

@@ -5,7 +5,7 @@ import { TooltipContent } from 'components/TooltipContent'
 import { useTooltip } from 'components/TooltipProvider'
 import { computeTooltipPosition } from '../../utils/compute-positions'
 import styles from './styles.module.css'
-import type { ITooltip } from './TooltipTypes'
+import type { IPosition, ITooltip } from './TooltipTypes'
 
 const Tooltip = ({
   // props
@@ -22,6 +22,7 @@ const Tooltip = ({
   children = null,
   delayShow = 0,
   delayHide = 0,
+  float = false,
   noArrow,
   style: externalStyles,
   position,
@@ -39,6 +40,7 @@ const Tooltip = ({
   const [inlineArrowStyles, setInlineArrowStyles] = useState({})
   const [show, setShow] = useState<boolean>(false)
   const [calculatingPosition, setCalculatingPosition] = useState(false)
+  const [lastFloatPosition, setLastFloatPosition] = useState<IPosition | null>(null)
   const { anchorRefs, setActiveAnchor: setProviderActiveAnchor } = useTooltip()(id)
   const [activeAnchor, setActiveAnchor] = useState<React.RefObject<HTMLElement>>({ current: null })
 
@@ -101,22 +103,18 @@ const Tooltip = ({
     }
   }
 
-  const handleTooltipPosition = () => {
-    if (!position) {
-      return
-    }
-
+  const handleTooltipPosition = ({ x, y }: IPosition) => {
     const virtualElement = {
       getBoundingClientRect() {
         return {
-          x: position.x,
-          y: position.y,
+          x,
+          y,
           width: 0,
           height: 0,
-          top: position.y,
-          left: position.x,
-          right: position.x,
-          bottom: position.y,
+          top: y,
+          left: x,
+          right: x,
+          bottom: y,
         }
       },
     } as Element
@@ -139,6 +137,19 @@ const Tooltip = ({
     })
   }
 
+  const handleMouseMove = (event?: Event) => {
+    if (!event) {
+      return
+    }
+    const e = event as MouseEvent
+    const p = {
+      x: e.clientX,
+      y: e.clientY,
+    }
+    handleTooltipPosition(p)
+    setLastFloatPosition(p)
+  }
+
   const handleClickTooltipAnchor = () => {
     if (setIsOpen) {
       setIsOpen(!isOpen)
@@ -191,6 +202,12 @@ const Tooltip = ({
         { event: 'focus', listener: debouncedHandleShowTooltip },
         { event: 'blur', listener: debouncedHandleHideTooltip },
       )
+      if (float) {
+        enabledEvents.push({
+          event: 'mousemove',
+          listener: handleMouseMove,
+        })
+      }
     }
 
     enabledEvents.forEach(({ event, listener }) => {
@@ -211,8 +228,23 @@ const Tooltip = ({
 
   useEffect(() => {
     if (position) {
-      // if `position` is set, override regular positioning
-      handleTooltipPosition()
+      // if `position` is set, override regular and `float` positioning
+      handleTooltipPosition(position)
+      return () => null
+    }
+
+    if (float) {
+      if (lastFloatPosition) {
+        /*
+          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)
+      }
+      // if `float` is set, override regular positioning
       return () => null
     }
 

src/components/Tooltip/TooltipTypes.d.ts

@@ -23,6 +23,7 @@ export type DataAttribute =
   | 'position-strategy'
   | 'delay-show'
   | 'delay-hide'
+  | 'float'
 
 export interface IPosition {
   x: number
@@ -46,6 +47,7 @@ export interface ITooltip {
   positionStrategy?: PositionStrategy
   delayShow?: number
   delayHide?: number
+  float?: boolean
   noArrow?: boolean
   style?: CSSProperties
   position?: IPosition

src/components/TooltipController/TooltipController.tsx

@@ -28,6 +28,7 @@ const TooltipController = ({
   positionStrategy = 'absolute',
   delayShow = 0,
   delayHide = 0,
+  float = false,
   noArrow,
   style,
   position,
@@ -40,6 +41,7 @@ const TooltipController = ({
   const [tooltipOffset, setTooltipOffset] = useState(offset)
   const [tooltipDelayShow, setTooltipDelayShow] = useState(delayShow)
   const [tooltipDelayHide, setTooltipDelayHide] = useState(delayHide)
+  const [tooltipFloat, setTooltipFloat] = useState(float)
   const [tooltipWrapper, setTooltipWrapper] = useState<WrapperType>(wrapper)
   const [tooltipEvents, setTooltipEvents] = useState(events)
   const [tooltipPositionStrategy, setTooltipPositionStrategy] = useState(positionStrategy)
@@ -95,6 +97,9 @@ const TooltipController = ({
       'delay-hide': (value) => {
         setTooltipDelayHide(value === null ? delayHide : Number(value))
       },
+      float: (value) => {
+        setTooltipFloat(value === null ? float : Boolean(value))
+      },
     }
     // reset unset data attributes to default values
     // without this, data attributes from the last active anchor will still be used
@@ -177,6 +182,7 @@ const TooltipController = ({
     positionStrategy: tooltipPositionStrategy,
     delayShow: tooltipDelayShow,
     delayHide: tooltipDelayHide,
+    float: tooltipFloat,
     noArrow,
     style,
     position,

src/components/TooltipController/TooltipControllerTypes.d.ts

@@ -26,6 +26,7 @@ export interface ITooltipController {
   positionStrategy?: PositionStrategy
   delayShow?: number
   delayHide?: number
+  float?: boolean
   noArrow?: boolean
   style?: CSSProperties
   position?: IPosition
@@ -45,5 +46,6 @@ declare module 'react' {
     'data-tooltip-position-strategy'?: PositionStrategy
     'data-tooltip-delay-show'?: number
     'data-tooltip-delay-hide'?: number
+    'data-tooltip-float'?: boolean
   }
 }

src/styles.module.css

@@ -4,7 +4,7 @@
   height: 100vh;
 }
 
-.on-click-anchor {
+.big-anchor {
   width: 500px;
   height: 300px;
   background-color: #d3d3d3;