Without a tooltip primitive, you end up sprinkling custom hover states and positioned popovers throughout your UI — misaligned text, missed keyboard events (focus/blur), timing inconsistencies, and portal positioning chaos that breaks on small screens. Each button or icon needing help text becomes a bespoke context-dependent solution.

Tooltip wraps a single child element and shows rich text on hover or focus, automatically positioning itself around the anchor via placement (top, bottom, left, right, and compound variants like top-start). It is fully controlled by React's own internal state; the tooltip portal (a data-react-fancy-tooltip role="tooltip" div) appears and disappears based on mouse and keyboard interaction. Props: content (ReactNode), placement (defaults to "top"), delay (defaults to 200ms), offset (defaults to 8px), and optional className for overrides.

Import Tooltip from @particle-academy/react-fancy, wrap your trigger element, and pass content: <Tooltip content="Click to attach"><Button>Attach</Button></Tooltip>. The component clones the child to inject mouse/focus handlers and anchors the floating tooltip via useFloatingPosition, so no extra event wiring is required.