fix(tooltip): remove velocity skew/scale that blurred text on every appear

The tooltip animated a fractional scale() + skew() over 150ms on the element
containing its text. Chrome promotes the bubble to a compositor layer for the
transition, rasterizes the text once at the pre-transition scale, then
GPU-resamples that bitmap for the duration — so text rendered blurry until the
transition settled and the layer re-rasterized at 1:1.

It fired on every appear: a pointer entering a trigger is by definition moving,
so the first pointermove after pointerenter always set a non-zero skew and a
fractional scale.

- drop the velocity-reactive skew/scale flourish and the pointer-velocity
  bookkeeping that existed only to feed it
- round tooltip position to whole pixels; clientX/clientY are fractional on
  HiDPI/zoomed displays, leaving the bubble on a subpixel boundary
- drop the dead `filter` from the transition list — nothing ever set a filter
- skip the state update when the rounded position is unchanged, so pointer
  jitter no longer re-renders every Tooltip.Trigger/Content consumer

The 150ms ease-out translate is kept, so the bubble still trails the cursor.

Author: waleedlatif1

packages/emcn/src/components/tooltip/tooltip.tsx

@@ -8,31 +8,20 @@ import { cn } from '../../lib/cn'
 const TOOLTIP_OFFSET = 16
 const EDGE_GUTTER = 16
 const EDGE_THRESHOLD = 360
-const MIN_FRAME_MS = 16
 
 /**
- * Resolved position and motion of a floating tooltip. `x`/`y` are viewport
+ * Resolved position of a floating tooltip. `x`/`y` are whole-pixel viewport
  * coordinates the tooltip anchors to; `alignX`/`alignY` flip the tooltip away
- * from the nearest viewport edge; `skew`/`scale*` add the velocity-reactive
- * flourish while the pointer is moving.
+ * from the nearest viewport edge.
  */
 export interface FloatingTooltipState {
   visible: boolean
   x: number
   y: number
-  skew: number
-  scaleX: number
-  scaleY: number
   alignX: 'left' | 'right'
   alignY: 'above' | 'below'
 }
 
-interface PointerSnapshot {
-  x: number
-  y: number
-  time: number
-}
-
 /**
  * Pointer/focus event handlers that drive a {@link useFloatingTooltip}. Spread
  * onto the element that should reveal the tooltip on hover or focus.
@@ -50,9 +39,6 @@ const HIDDEN_STATE: FloatingTooltipState = {
   visible: false,
   x: 0,
   y: 0,
-  skew: 0,
-  scaleX: 1,
-  scaleY: 1,
   alignX: 'left',
   alignY: 'below',
 }
@@ -71,48 +57,32 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
   const canShowRef = React.useRef(canShow)
   canShowRef.current = canShow
 
-  const lastPointerRef = React.useRef<PointerSnapshot | null>(null)
   const [state, setState] = React.useState<FloatingTooltipState>(HIDDEN_STATE)
 
   const handlers = React.useMemo<FloatingTooltipHandlers>(() => {
-    const hide = () => {
-      lastPointerRef.current = null
-      setState((current) => (current.visible ? HIDDEN_STATE : current))
-    }
-
-    const showStatic = (clientX: number, clientY: number) => {
-      lastPointerRef.current = { x: clientX, y: clientY, time: performance.now() }
-      setState({
-        visible: true,
-        ...getTooltipPosition(clientX, clientY),
-        skew: 0,
-        scaleX: 1,
-        scaleY: 1,
-      })
+    const hide = () => setState((current) => (current.visible ? HIDDEN_STATE : current))
+
+    const show = (clientX: number, clientY: number) => {
+      const next = getTooltipPosition(clientX, clientY)
+      setState((current) =>
+        current.visible &&
+        current.x === next.x &&
+        current.y === next.y &&
+        current.alignX === next.alignX &&
+        current.alignY === next.alignY
+          ? current
+          : { visible: true, ...next }
+      )
     }
 
     return {
       onPointerEnter: (event) => {
         if (!canShowRef.current(event.currentTarget)) return
-        showStatic(event.clientX, event.clientY)
+        show(event.clientX, event.clientY)
       },
       onPointerMove: (event) => {
         if (!canShowRef.current(event.currentTarget)) return
-        const now = performance.now()
-        const previous = lastPointerRef.current
-        const elapsed = previous ? Math.max(now - previous.time, MIN_FRAME_MS) : MIN_FRAME_MS
-        const velocityX = previous ? ((event.clientX - previous.x) / elapsed) * MIN_FRAME_MS : 0
-        const velocityY = previous ? ((event.clientY - previous.y) / elapsed) * MIN_FRAME_MS : 0
-        const velocity = Math.hypot(velocityX, velocityY)
-
-        lastPointerRef.current = { x: event.clientX, y: event.clientY, time: now }
-        setState({
-          visible: true,
-          ...getTooltipPosition(event.clientX, event.clientY),
-          skew: clamp(velocityX * 0.11, -6, 6),
-          scaleX: 1 + Math.min(0.035, velocity / 1100),
-          scaleY: 1 - Math.min(0.02, velocity / 1500),
-        })
+        show(event.clientX, event.clientY)
       },
       onPointerLeave: hide,
       onPointerDown: hide,
@@ -121,14 +91,7 @@ export function useFloatingTooltip(canShow: (target: HTMLElement) => boolean): {
         if (!canShowRef.current(target)) return
         if (!isFocusVisible(target)) return
         const rect = target.getBoundingClientRect()
-        lastPointerRef.current = null
-        setState({
-          visible: true,
-          ...getTooltipPosition(rect.left + rect.width / 2, rect.bottom),
-          skew: 0,
-          scaleX: 1,
-          scaleY: 1,
-        })
+        show(rect.left + rect.width / 2, rect.bottom)
       },
       onBlur: hide,
     }
@@ -248,14 +211,11 @@ export const FloatingTooltip = React.memo(function FloatingTooltip({
       aria-hidden={role ? undefined : 'true'}
       data-native-surface-overlay=''
       className={cn(
-        'pointer-events-none fixed top-0 left-0 z-[var(--z-tooltip)] w-fit max-w-[min(16rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg)] px-2 py-1.5 text-[var(--text-body)] text-caption opacity-100 shadow-sm transition-[opacity,filter,transform] duration-150 ease-out',
+        'pointer-events-none fixed top-0 left-0 z-[var(--z-tooltip)] w-fit max-w-[min(16rem,calc(100vw-2rem))] rounded-lg border border-[var(--border)] bg-[var(--bg)] px-2 py-1.5 text-[var(--text-body)] text-caption opacity-100 shadow-sm transition-[opacity,transform] duration-150 ease-out',
         'motion-reduce:transition-none',
         className
       )}
-      style={{
-        transform: `${getTooltipTranslate(state, offset)} skew(${state.skew}deg) scale(${state.scaleX}, ${state.scaleY})`,
-        transformOrigin: state.alignX === 'left' ? '12px 12px' : 'calc(100% - 12px) 12px',
-      }}
+      style={{ transform: getTooltipTranslate(state, offset) }}
     >
       {children ?? <span className='block whitespace-normal break-words text-left'>{label}</span>}
     </div>,
@@ -268,15 +228,15 @@ function getTooltipPosition(
   clientY: number
 ): Pick<FloatingTooltipState, 'x' | 'y' | 'alignX' | 'alignY'> {
   if (typeof window === 'undefined') {
-    return { x: clientX, y: clientY, alignX: 'left', alignY: 'below' }
+    return { x: Math.round(clientX), y: Math.round(clientY), alignX: 'left', alignY: 'below' }
   }
 
   const alignX = window.innerWidth - clientX < EDGE_THRESHOLD ? 'right' : 'left'
   const alignY = window.innerHeight - clientY < EDGE_THRESHOLD / 2 ? 'above' : 'below'
 
   return {
-    x: clamp(clientX, EDGE_GUTTER, window.innerWidth - EDGE_GUTTER),
-    y: clamp(clientY, EDGE_GUTTER, window.innerHeight - EDGE_GUTTER),
+    x: Math.round(clamp(clientX, EDGE_GUTTER, window.innerWidth - EDGE_GUTTER)),
+    y: Math.round(clamp(clientY, EDGE_GUTTER, window.innerHeight - EDGE_GUTTER)),
     alignX,
     alignY,
   }