Tooltip pattern applies a 200ms delay on first hover and skips it for subsequent hovers within a 300ms cooldown window

The author introduces a "warm window" pattern for tooltips to solve the trade-off between instant tooltips, which cause flicker when crossing the page, and delayed tooltips, which feel sluggish when moving between adjacent items. A 200ms delay is applied on the first hover, but if the user moves to another tooltip within a 300ms cooldown period, the delay and entrance animation are skipped. This prevents the UI from feeling unresponsive when a user is actively inspecting a cluster of related elements.

The implementation tracks an `isWarm` state across components using React Context. When a tooltip opens, the page becomes warm; when it closes, a 300ms timer starts. If another tooltip is triggered during this window, it opens instantly via a CSS data attribute that sets transition duration to 0ms. Adopting this requires managing shared state across tooltip instances and handling timer logic for opening, closing, and cooldowns.

The pattern relies on a shared provider to track the warm state, meaning tooltips outside this provider will not benefit from the skipped delay. Additionally, if the 300ms cooldown expires, the page becomes "cold" and the 200ms delay returns, which might still feel slow if a user pauses briefly between items. The solution is demonstrated in React with Radix and Motion, though the author notes a follow-up article replicates the basic UX without JavaScript.