Bugfix: Stop tooltip jumping to window corner

- A virtual-scroll row recycled while hovered removes its DOM node without firing `mouseleave`, so the 400ms show-timer leaked and later fired against a detached node. A detached element reports an all-zero `getBoundingClientRect()`, so the tooltip landed in the window's top-left corner instead of over the row. Reproduced in a large directory (45k+ files) where async recursive-size enrichment re-renders rows under a stationary cursor.
- Root cause: `destroy()` only cancelled a pending timer when `activeElement === node`, but `activeElement` is null during the show delay. Now the timer's owning node is tracked via `timerNode` and cancelled on teardown.
- Defense in depth: `showTooltip` / `positionTooltip` bail when the trigger is detached (`!el.isConnected`).
- Added `tooltip.test.ts` covering both teardown paths plus a connected-trigger sanity check, and a gotcha in `lib/ui/CLAUDE.md`.

Author: vdavid

apps/desktop/src/lib/tooltip/tooltip.test.ts

@@ -0,0 +1,78 @@
+import { afterEach, beforeEach, describe, expect, it, vi } from 'vitest'
+import { tooltip } from './tooltip'
+
+describe('tooltip', () => {
+  beforeEach(() => {
+    document.body.innerHTML = ''
+    vi.useFakeTimers()
+  })
+
+  afterEach(() => {
+    vi.useRealTimers()
+  })
+
+  function makeTrigger(): HTMLElement {
+    const el = document.createElement('div')
+    el.textContent = 'row'
+    document.body.appendChild(el)
+    return el
+  }
+
+  // Regression: a virtual-scroll row recycled while hovered used to leak its 400ms show-timer (removing
+  // a node fires no `mouseleave`), which then fired against the detached node — `getBoundingClientRect`
+  // returns all-zero for a detached element, so the tooltip landed in the top-left corner of the window.
+  it('does not show when the trigger is destroyed during the show delay', () => {
+    const el = makeTrigger()
+    const action = tooltip(el, 'Folder info')
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+
+    // Svelte tearing down a recycled row: it removes the node and calls the action's destroy().
+    el.remove()
+    action.destroy?.()
+
+    vi.advanceTimersByTime(500)
+
+    expect(document.querySelector('.cmdr-tooltip.visible')).toBeNull()
+  })
+
+  // Defense in depth: even if the timer fires against a detached node (no destroy ran — e.g. the trigger
+  // was removed as part of a larger subtree), the tooltip must never become visible in the corner.
+  it('does not show when the timer fires against a detached node', () => {
+    const el = makeTrigger()
+    tooltip(el, 'Folder info')
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+
+    el.remove()
+
+    vi.advanceTimersByTime(500)
+
+    expect(document.querySelector('.cmdr-tooltip.visible')).toBeNull()
+  })
+
+  // Sanity: a still-connected trigger shows and positions the tooltip normally (not dumped at the corner).
+  it('shows and positions the tooltip for a connected trigger', () => {
+    const el = makeTrigger()
+    // happy-dom does no layout, so feed a real rect for the positioning math.
+    vi.spyOn(el, 'getBoundingClientRect').mockReturnValue({
+      left: 100,
+      top: 100,
+      right: 150,
+      bottom: 120,
+      width: 50,
+      height: 20,
+      x: 100,
+      y: 100,
+      toJSON: () => ({}),
+    })
+
+    tooltip(el, 'Folder info')
+    el.dispatchEvent(new MouseEvent('mouseenter'))
+    vi.advanceTimersByTime(500)
+
+    const tip = document.querySelector('.cmdr-tooltip')
+    expect(tip).not.toBeNull()
+    expect(tip?.classList.contains('visible')).toBe(true)
+    expect(tip?.textContent).toBe('Folder info')
+    expect((tip as HTMLElement).style.top).not.toBe('0px')
+  })
+})

apps/desktop/src/lib/tooltip/tooltip.ts

@@ -14,6 +14,8 @@ let tooltipEl: HTMLDivElement | null = null
 let tooltipIdCounter = 0
 let activeElement: HTMLElement | null = null
 let showTimer: ReturnType<typeof setTimeout> | null = null
+/** The element a pending show-timer belongs to, so we can cancel it if that element is torn down. */
+let timerNode: HTMLElement | null = null
 
 /** Shared container for tooltips (keeps them inside a landmark to satisfy axe's `region` rule). */
 let tooltipContainer: HTMLDivElement | null = null
@@ -82,7 +84,21 @@ export function escapeHtml(text: string): string {
   return div.innerHTML
 }
 
+/**
+ * A trigger removed from the DOM reports an all-zero `getBoundingClientRect()`, so positioning against
+ * it would dump the tooltip in the top-left corner. `isConnected` is the precise signal for that.
+ */
+function isTriggerDetached(el: HTMLElement): boolean {
+  return !el.isConnected
+}
+
 function positionTooltip(triggerEl: HTMLElement): void {
+  // Guards the live-update path (content changes while shown) against a trigger that vanished meanwhile.
+  if (isTriggerDetached(triggerEl)) {
+    hideTooltip()
+    return
+  }
+
   const tip = ensureTooltipElement()
   const triggerRect = triggerEl.getBoundingClientRect()
   const tipRect = tip.getBoundingClientRect()
@@ -103,6 +119,11 @@ function positionTooltip(triggerEl: HTMLElement): void {
 }
 
 function showTooltip(triggerEl: HTMLElement, param: TooltipParam): void {
+  // The trigger may have been removed from the DOM during the show delay (e.g. a virtual-scroll row
+  // recycled while hovered). Never show against a detached element: its rect is all-zero, which would
+  // place the tooltip in the top-left corner.
+  if (isTriggerDetached(triggerEl)) return
+
   const tip = ensureTooltipElement()
   setTooltipContent(tip, param)
   triggerEl.setAttribute('aria-describedby', tip.id)
@@ -132,12 +153,15 @@ function cancelTimer(): void {
     clearTimeout(showTimer)
     showTimer = null
   }
+  timerNode = null
 }
 
 function startShowTimer(triggerEl: HTMLElement, param: TooltipParam): void {
   cancelTimer()
+  timerNode = triggerEl
   showTimer = setTimeout(() => {
     showTimer = null
+    timerNode = null
     showTooltip(triggerEl, param)
   }, SHOW_DELAY_MS)
 }
@@ -213,6 +237,14 @@ export function tooltip(node: HTMLElement, param: TooltipParam): ActionReturn<To
       node.removeEventListener('blur', handleBlur)
       node.removeEventListener('keydown', handleKeyDown)
 
+      // Cancel a pending show-timer owned by this node. Svelte removes a virtual-scroll row's DOM node
+      // without firing `mouseleave`, so without this the timer would fire later against a detached node
+      // and the tooltip would land in the top-left corner. `activeElement` is still null during the
+      // delay window, so the `activeElement === node` branch below wouldn't catch it.
+      if (timerNode === node) {
+        cancelTimer()
+      }
+
       // If this element's tooltip is showing, hide it
       if (activeElement === node) {
         hideTooltip()

apps/desktop/src/lib/ui/CLAUDE.md

@@ -93,6 +93,15 @@ import { tooltip } from '$lib/tooltip/tooltip'
 The tooltip element has `white-space: pre-line` and uses global CSS classes, so `<span class="size-mb">` etc. work
 inside `{ html }` tooltips. The `html` variant renders via `innerHTML`; only use with trusted content.
 
+**Gotcha (detached trigger → corner tooltip)**: the show is deferred by a 400ms timer. A virtual-scroll row recycled
+while hovered is removed from the DOM **without** firing `mouseleave`, so the timer would otherwise survive and later
+fire against a detached node — whose `getBoundingClientRect()` is all-zero, dumping the tooltip in the window's top-left
+corner. Two guards prevent this and must both stay: (1) the action's `destroy()` cancels a pending timer it owns
+(tracked via `timerNode`), since `activeElement` is still null during the delay window; (2) `showTooltip` /
+`positionTooltip` bail when `isTriggerDetached(el)` (`!el.isConnected`). Don't replace the `isConnected` check with a
+zero-rect heuristic — happy-dom reports zero rects for every connected element, so it false-positives the whole test
+suite. Covered by `tooltip.test.ts`.
+
 ## Button
 
 Variants: `primary` | `secondary` (default) | `danger`. Sizes: `regular` (default) | `mini`. Extends