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.
Table of contents
A Semantic HTML FoundationAnchoring the Tooltip (and Dealing with Edge Detection)Controlling Timing in CSSFallbacksDemoQuestions this post answers
How do I control tooltip hover delay timing using only CSS, without JavaScript?
Use the interest-delay-start and interest-delay-end CSS properties on the element that triggers the popover, for example setting interest-delay-start to 200ms and interest-delay-end to 150ms. Combined with a popover="hint" element and the interestfor attribute linking the trigger to the tooltip, this creates a native delayed hover tooltip with no JavaScript required. daily.dev surfaces posts like this for developers replacing JS-based UI patterns with native CSS.
What is the CSS fallback for interest-delay-start when popover="hint" or interest-delay is not supported, like in Safari?
Wrap the fallback in an @supports not (interest-delay-start: 0s) block and use a custom --warm CSS variable transitioned with a delay: 0 by default with a 700ms transition, switching to 1 on hover with a 250ms transition. Then apply transition-delay: calc((1 - var(--warm)) * 200ms) on the popover element to replicate the same warm/cool hover timing behavior. Developers hedging against inconsistent browser support track fallback techniques like this via daily.dev.