--- title: Tooltips Need a Delay, and Then They Need to Skip It –... description: A developer building FrontPrep explains a UX pattern for tooltip timing: adding a 200ms open delay to prevent tooltips firing on incidental mouse travel, then... canonical: https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63 twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog | daily.dev og:description: A developer building FrontPrep explains a UX pattern for tooltip timing: adding a 200ms open delay to prevent tooltips firing on incidental mouse travel, then... og:url: https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63 og:image: https://api.daily.dev/og/posts/iWDyTbf63.png og:image:alt: Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog og:image:width: 1200 og:image:height: 630 og:locale: en --- > ## Documentation Index > Fetch the complete documentation index at: https://daily.dev/llms.txt > Use this file to discover all available pages before exploring further. # Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 8 min read · 2 upvotes · 0 comments ## Summary A developer building FrontPrep explains a UX pattern for tooltip timing: adding a 200ms open delay to prevent tooltips firing on incidental mouse travel, then adding a 300ms 'warm window' cooldown so hovering between adjacent tooltips (like company logos) skips the delay and opens instantly. The post walks through a React implementation using refs and a context provider to track warm/cold state, explains why 200ms was chosen as the delay threshold, and includes a Claude skill file that can audit a codebase for this tooltip timing pattern. ## Full article daily.dev links to this article rather than hosting it. Read it at the original source: ## Questions this post answers ### How do I stop tooltips from opening instantly when the mouse just passes over the trigger while moving across the page? Add a short open delay, around 200ms, before the tooltip shows, using setTimeout in the mouseenter handler and clearing it on mouseleave if the tooltip never opened. Below 150ms a passing cursor still triggers it, and above 250ms an intentional hover feels sluggish, so 200ms balances both cases. _Developers polishing hover interactions can find implementation walkthroughs like this one through daily.dev._ ### How can adjacent tooltips open instantly without a delay after the first one has already appeared, without removing the delay permanently? Track a shared warm state with a 300ms cooldown timer that starts when a tooltip closes; if another tooltip is hovered before the cooldown ends, it opens instantly and cancels the timer, keeping the page warm, otherwise the page goes cold and the next hover waits the full 200ms again. _Anyone refining multi-element hover UX can track patterns like this warm-cooldown approach on daily.dev._ ### Why should isWarm be stored in a ref instead of React state in a tooltip provider? Using a ref instead of state avoids re-rendering every tooltip on the page whenever the warm status changes, since the value is only read inside event handlers like mouseenter and mouseleave rather than needing to trigger a UI update. This keeps the interaction lightweight even with many tooltips on one page. _Developers optimizing React component re-renders can explore patterns like this via daily.dev._ ## Similar posts on daily.dev - [Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog](https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o) · Frontend Masters · 11 upvotes · 0 comments - [Opening the can of tooltips](https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp) · Patrick Brosset · 1 upvotes · 1 comments - [The Lazy Tooltip Follower](https://daily.dev/posts/the-lazy-tooltip-follower-7xgufev83) · CSS Tip · 1 upvotes · 0 comments - [From latency to instant: Modernizing GitHub Issues navigation performance](https://daily.dev/posts/from-latency-to-instant-modernizing-github-issues-navigation-performance-t1jb6lu6h) · GitHub Blog · 14 upvotes · 1 comments - [Perfectly Pointed Tooltips: A Foundation – Frontend Masters Blog](https://daily.dev/posts/perfectly-pointed-tooltips-a-foundation-frontend-masters-blog-yodltprsv) · Frontend Masters · 6 upvotes · 0 comments --- Tags: [#javascript](https://daily.dev/tags/javascript), [#react](https://daily.dev/tags/react), [#css](https://daily.dev/tags/css), [#ux](https://daily.dev/tags/ux) [View this post on daily.dev](https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180},"sameAs":["https://twitter.com/dailydotdev","https://github.com/dailydotdev","https://www.linkedin.com/company/daily-dev-ltd"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}}]} {"@context":"https://schema.org","@type":"TechArticle","headline":"Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog","url":"https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63"},"datePublished":"2026-08-13T21:13:38.596Z","dateModified":"2026-09-13T19:31:53.334Z","description":"A developer building FrontPrep explains a UX pattern for tooltip timing: adding a 200ms open delay to prevent tooltips firing on incidental mouse travel, then...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/79834cc1eaf6d617a9f6fe1bf0933bfc?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/79834cc1eaf6d617a9f6fe1bf0933bfc?_a=AQAEuop","isAccessibleForFree":true,"articleSection":"Frontend Masters","inLanguage":"en","publisher":{"@type":"Organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/apple-touch-icon.png","width":180,"height":180}},"author":{"@type":"Organization","name":"Frontend Masters","logo":"https://media.daily.dev/image/upload/t_logo,f_auto/v1/logos/d34dd87208f24090bfb0917307fcf89f","url":"https://daily.dev/sources/frontendmasters"},"commentCount":0,"discussionUrl":"https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":2},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"javascript,react,css,ux","timeRequired":"PT8M"} {"@context":"https://schema.org","@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev"},{"@type":"ListItem","position":2,"name":"Frontend Masters","item":"https://daily.dev/sources/frontendmasters"},{"@type":"ListItem","position":3,"name":"Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63#faq","mainEntity":[{"@type":"Question","name":"How do I stop tooltips from opening instantly when the mouse just passes over the trigger while moving across the page?","acceptedAnswer":{"@type":"Answer","text":"Add a short open delay, around 200ms, before the tooltip shows, using setTimeout in the mouseenter handler and clearing it on mouseleave if the tooltip never opened. Below 150ms a passing cursor still triggers it, and above 250ms an intentional hover feels sluggish, so 200ms balances both cases. Developers polishing hover interactions can find implementation walkthroughs like this one through daily.dev."}},{"@type":"Question","name":"How can adjacent tooltips open instantly without a delay after the first one has already appeared, without removing the delay permanently?","acceptedAnswer":{"@type":"Answer","text":"Track a shared warm state with a 300ms cooldown timer that starts when a tooltip closes; if another tooltip is hovered before the cooldown ends, it opens instantly and cancels the timer, keeping the page warm, otherwise the page goes cold and the next hover waits the full 200ms again. Anyone refining multi-element hover UX can track patterns like this warm-cooldown approach on daily.dev."}},{"@type":"Question","name":"Why should isWarm be stored in a ref instead of React state in a tooltip provider?","acceptedAnswer":{"@type":"Answer","text":"Using a ref instead of state avoids re-rendering every tooltip on the page whenever the warm status changes, since the value is only read inside event handlers like mouseenter and mouseleave rather than needing to trigger a UI update. This keeps the interaction lightweight even with many tooltips on one page. Developers optimizing React component re-renders can explore patterns like this via daily.dev."}}]} ```