On the question listing pages for my product, Front Prep, I display company logos next to interview questions. When you hover over a logo, a tooltip shows the company name. I had set the tooltip delay to 0, so tooltips appeared instantly as I moved the cursor across the page. To fix this, I added a 200ms transition delay, but this created a new problem: moving between multiple logos meant waiting the same 200ms delay each time, feeling sluggish.

This post is about a small interaction pattern found in browser toolbars and websites. My solution divides into three parts: hover over a logo, the tooltip waits 200ms before opening. When a tooltip closes, a 300ms timer starts, which I call the warm window. If you hover over another logo while this timer runs, the tooltip opens instantly, skipping the delay. When the timer expires, the page becomes cold, and the 200ms wait returns.

In Front Prep, my tooltips are built with Radix and Motion. The code uses a use Context variable to track the is Warm state between components. On hover, the component checks if the page is warm; if so, the tooltip opens instantly; otherwise, it starts a 200ms timer. The show function copies the warm state into an instant flag, which CSS uses to skip the entrance animation via a data attribute.

This pattern improves user experience by avoiding both instant popups and sluggish delays. It’s a simple approach you can implement in your own codebase.