// HACKER NEWS — CYBERSECURITY
Tooltips need a delay, and then they need to skip it
On the question listing pages for my product, FrontPrep, I display company logos next to the interview questions. When you hover over a logo, a tooltip shows the company name.One thing had been annoying me for a couple of days. If I just moved the cursor across the page, tooltips kept showing up instantly along the way. The cause was simple: I had set the tooltip delay to 0, so it appeared the moment the cursor hovered over the logo.To fix this issue, I added a 200ms transition delay, which worked but created a new problem. If you look at the user interface, there are a couple of rows where multiple logos sit next to each other because the same interview questions are asked at multiple companies. Now, moving from one logo to another meant waiting the same 200ms delay every time you hovered over a different company logo, which felt sluggish and led to a poor user experience.
This post is not about building a tooltip. It’s about one small interaction pattern, the same one you will find in browser toolbars and various websites, and people are unaware of it.
Here is a short video of the before-and-after experience on my website. It helps you understand the problem better.
In FrontPrep, my tooltips are built with Radix and Motion. I will demonstrate the pattern using a simpler React version below, and later in the post, I will put this idea into a Claude skill which you can use to audit your own codebase.
Here’s a follow-up article that replicates the basic UX here without any JavaScript.
I will try to explain the code in the same order in which things happen when you move the cursor.
When onMouseEnter is triggered on a logo, this function is called:
On hover, this component asks one question: is the page warm? If it is, the tooltip opens instantly. If not, it starts a 200ms timer and waits. You might be wondering where this tooltips object came from. It comes from the TooltipProvider which I will discuss in the last step.
Here’s that show function that handles the opening of the tooltip:
Coming back to point 1, it copied what tooltips.isWarm returns into a flag called instant because this instant flag is added to the tooltip as a data attribute, which CSS uses to skip the entrance animation.