Tooltips Need a Delay, and Then They Need to Skip It
A developer shares a UX pattern for implementing tooltip delays that balances responsiveness with usability. By introducing a 'cooldown' period, the interface remains snappy when moving between adjacent elements while preventing accidental triggers.
Why it matters
This pattern addresses a common friction point in web design, improving accessibility and user experience for interactive interfaces.
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.
Get smarter about the news
Sign up free for a feed built around what you actually care about, Dive Deeper research on any story, and the full text of every article.
Create free accountAlready have an account? Sign in