--- title: Delayed-Then-Instant Tooltips with HTML & CSS Alone –... description: A response to a React-based tooltip delay solution demonstrates how to build delayed-then-instant tooltips using only HTML and CSS, leveraging popover="hint",... canonical: https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o twitter:card: summary_large_image twitter:site: @dailydotdev og:type: website og:site_name: daily.dev og:title: Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog | daily.dev og:description: A response to a React-based tooltip delay solution demonstrates how to build delayed-then-instant tooltips using only HTML and CSS, leveraging popover="hint",... og:url: https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o og:image: https://api.daily.dev/og/posts/kllVWJq2o.png og:image:alt: Delayed-Then-Instant Tooltips with HTML & CSS Alone – 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. # Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog **[Frontend Masters](https://daily.dev/sources/frontendmasters)** · 4 min read · 11 upvotes · 0 comments ## Summary A response to a React-based tooltip delay solution demonstrates how to build delayed-then-instant tooltips using only HTML and CSS, leveraging popover="hint", the interestfor attribute, interest-delay-start/end properties, and CSS anchor positioning for edge detection. Since browser support (notably Safari) is incomplete, a CSS-only fallback using a custom --warm variable and transition delays replicates the same timing behavior without any JavaScript. ## 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 control the hover delay for a tooltip using CSS interest-delay-start and interest-delay-end? Set interest-delay-start and interest-delay-end properties directly on the triggering element, for example interest-delay-start: 200ms and interest-delay-end: 150ms on a button. A rule like .area:has(:popover-open) button { interest-delay-start: 0s } removes the delay once a popover in the area is already open, giving the delayed-then-instant effect without any JavaScript. _daily.dev surfaces CSS platform features like this for developers replacing JS-heavy UI patterns with native browser APIs._ ### Does Safari support the CSS popover="hint" attribute for tooltips? No, Safari does not yet support popover="hint", which is needed for the pure HTML/CSS interest-based tooltip approach. A fallback can be built using an @supports not (interest-delay-start: 0s) block with a --warm custom property and transition-delay to replicate the same hover timing behavior in browsers lacking support. _developers weighing browser support gaps can track compatibility notes like this on daily.dev before shipping._ ### How can I build a tooltip using only HTML and CSS without JavaScript? Use a button with interestfor pointing to a span with popover="hint", which produces a working hover tooltip with zero JavaScript. Adding position: fixed and position-area: block-start on [popover], plus position-try values like flip-block and flip-inline, anchors the tooltip to the button and handles edge-of-screen flipping automatically. _daily.dev helps developers exploring native HTML/CSS alternatives to JavaScript-driven tooltip libraries stay current._ ## Similar posts on daily.dev - [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 - [The Lazy Tooltip Follower](https://daily.dev/posts/the-lazy-tooltip-follower-7xgufev83) · CSS Tip · 1 upvotes · 0 comments - [Opening the can of tooltips](https://daily.dev/posts/opening-the-can-of-tooltips-pv5iyipnp) · Patrick Brosset · 1 upvotes · 1 comments - [Tooltips Need a Delay, and Then They Need to Skip It – Master.dev Blog](https://daily.dev/posts/tooltips-need-a-delay-and-then-they-need-to-skip-it-master-dev-blog-iwdytbf63) · Frontend Masters · 2 upvotes · 0 comments --- Tags: [#css](https://daily.dev/tags/css), [#html](https://daily.dev/tags/html) [View this post on daily.dev](https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o) ```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":"Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog","url":"https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o","mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o"},"datePublished":"2026-08-13T21:34:01.384Z","dateModified":"2026-09-13T21:22:44.283Z","description":"A response to a React-based tooltip delay solution demonstrates how to build delayed-then-instant tooltips using only HTML and CSS, leveraging popover=\"hint\",...","image":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90b26fef6e0183ba21d74b6600e59501?_a=AQAEuop","thumbnailUrl":"https://media.daily.dev/image/upload/f_auto,q_auto/v1/posts/90b26fef6e0183ba21d74b6600e59501?_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/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o","interactionStatistic":[{"@type":"InteractionCounter","interactionType":{"@type":"LikeAction"},"userInteractionCount":11},{"@type":"InteractionCounter","interactionType":{"@type":"CommentAction"},"userInteractionCount":0}],"keywords":"css,html","timeRequired":"PT4M"} {"@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":"Delayed-Then-Instant Tooltips with HTML & CSS Alone – Master.dev Blog"}]} {"@context":"https://schema.org","@type":"FAQPage","@id":"https://daily.dev/posts/delayed-then-instant-tooltips-with-html-css-alone-master-dev-blog-kllvwjq2o#faq","mainEntity":[{"@type":"Question","name":"How do I control the hover delay for a tooltip using CSS interest-delay-start and interest-delay-end?","acceptedAnswer":{"@type":"Answer","text":"Set interest-delay-start and interest-delay-end properties directly on the triggering element, for example interest-delay-start: 200ms and interest-delay-end: 150ms on a button. A rule like .area:has(:popover-open) button { interest-delay-start: 0s } removes the delay once a popover in the area is already open, giving the delayed-then-instant effect without any JavaScript. daily.dev surfaces CSS platform features like this for developers replacing JS-heavy UI patterns with native browser APIs."}},{"@type":"Question","name":"Does Safari support the CSS popover=\"hint\" attribute for tooltips?","acceptedAnswer":{"@type":"Answer","text":"No, Safari does not yet support popover=\"hint\", which is needed for the pure HTML/CSS interest-based tooltip approach. A fallback can be built using an @supports not (interest-delay-start: 0s) block with a --warm custom property and transition-delay to replicate the same hover timing behavior in browsers lacking support. developers weighing browser support gaps can track compatibility notes like this on daily.dev before shipping."}},{"@type":"Question","name":"How can I build a tooltip using only HTML and CSS without JavaScript?","acceptedAnswer":{"@type":"Answer","text":"Use a button with interestfor pointing to a span with popover=\"hint\", which produces a working hover tooltip with zero JavaScript. Adding position: fixed and position-area: block-start on [popover], plus position-try values like flip-block and flip-inline, anchors the tooltip to the button and handles edge-of-screen flipping automatically. daily.dev helps developers exploring native HTML/CSS alternatives to JavaScript-driven tooltip libraries stay current."}}]} ```