Tooltip

Two tiers — a pure :hover/:focus tooltip that works everywhere, and interest-invoker toolbar tips with smart delays and viewport-aware flipping.

interest invokersanchor positioningexit animations

There are two ways to build a tooltip here. The plain-CSS one works in every browser today and is the right default for a lone control. The interest-invoker one is cutting-edge (Chromium only, for now) and earns its keep the moment you have a group of controls, because it can dynamically adjust the display delay.

Plain CSS - maximum compatibility

PreviewCode

<span class="group/tip relative inline-flex">
  <button
    aria-describedby="tip-library"
    class="inline-flex h-9 cursor-pointer items-center justify-center gap-2 rounded-lg border border-input bg-transparent px-4 text-sm font-medium whitespace-nowrap text-foreground transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring"
  >
    Hover or focus me
  </button>
  <span
    id="tip-library"
    role="tooltip"
    class="pointer-events-none absolute bottom-[calc(100%+8px)] left-1/2 -translate-x-1/2 translate-y-1 rounded-md bg-primary px-2.5 py-1.5 text-xs whitespace-nowrap text-primary-foreground opacity-0 transition-[opacity,translate] delay-100 group-hover/tip:translate-y-0 group-hover/tip:opacity-100 group-focus-within/tip:translate-y-0 group-focus-within/tip:opacity-100"
  >
    Add to library
  </span>
</span>

The safe default. No new platform features, no build caveats, works everywhere.

A group/tip wrapper toggles the tip via group-hover/tip: and group-focus-within/tip:, so keyboard users get it too.
delay-100 waits a beat before showing, so a cursor passing through doesn’t flash it.
pointer-events-none keeps the tip from stealing hover and flickering itself.

The trade-off: because it’s positioned by hand, it can’t flip at a viewport edge, so keep tips short. And, as the next section explains, a row of these can’t get the toolbar delay behavior right. For one button in the middle of a form, this is all you need.

Interest invokers - cutting edge, built for groups

PreviewCode

<div class="toolbar-tips flex items-center rounded-lg border border-border bg-card divide-x divide-border [&>button:first-of-type]:rounded-l-[7px] [&>button]:[interest-delay-start:0.3s] [&:has(:interest-source)>button]:[interest-delay-start:0s] [&>button:last-of-type]:rounded-r-[7px] [&>span]:border-0">
  <button
    type="button"
    interestfor="tt-bold"
    aria-label="Bold"
    class="inline-flex size-8 cursor-pointer items-center justify-center transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--tt-bold]"
  >
    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M6 12h9a4 4 0 0 1 0 8H7a1 1 0 0 1-1-1V5a1 1 0 0 1 1-1h7a4 4 0 0 1 0 8"></path>
    </svg>
  </button>
  <span
    id="tt-bold"
    popover="hint"
    class="pointer-events-none my-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs whitespace-nowrap text-primary-foreground translate-y-1 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-100 open:translate-y-0 open:opacity-100 starting:open:translate-y-1 starting:open:opacity-0 [position-anchor:--tt-bold] [position-area:top] [position-try-fallbacks:flip-block]"
    >Bold</span
  >

  <button
    type="button"
    interestfor="tt-italic"
    aria-label="Italic"
    class="inline-flex size-8 cursor-pointer items-center justify-center transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--tt-italic]"
  >
    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <line x1="19" x2="10" y1="4" y2="4"></line>
      <line x1="14" x2="5" y1="20" y2="20"></line>
      <line x1="15" x2="9" y1="4" y2="20"></line>
    </svg>
  </button>
  <span
    id="tt-italic"
    popover="hint"
    class="pointer-events-none my-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs whitespace-nowrap text-primary-foreground translate-y-1 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-100 open:translate-y-0 open:opacity-100 starting:open:translate-y-1 starting:open:opacity-0 [position-anchor:--tt-italic] [position-area:top] [position-try-fallbacks:flip-block]"
    >Italic</span
  >

  <button
    type="button"
    interestfor="tt-underline"
    aria-label="Underline"
    class="inline-flex size-8 cursor-pointer items-center justify-center transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--tt-underline]"
  >
    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M6 4v6a6 6 0 0 0 12 0V4"></path>
      <line x1="4" x2="20" y1="20" y2="20"></line>
    </svg>
  </button>
  <span
    id="tt-underline"
    popover="hint"
    class="pointer-events-none my-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs whitespace-nowrap text-primary-foreground translate-y-1 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-100 open:translate-y-0 open:opacity-100 starting:open:translate-y-1 starting:open:opacity-0 [position-anchor:--tt-underline] [position-area:top] [position-try-fallbacks:flip-block]"
    >Underline</span
  >

  <button
    type="button"
    interestfor="tt-link"
    aria-label="Insert link"
    class="inline-flex size-8 cursor-pointer items-center justify-center transition-colors hover:bg-accent focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-ring [anchor-name:--tt-link] border-0"
  >
    <svg class="size-4" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">
      <path d="M10 13a5 5 0 0 0 7.54.54l3-3a5 5 0 0 0-7.07-7.07l-1.72 1.71"></path>
      <path d="M14 11a5 5 0 0 0-7.54-.54l-3 3a5 5 0 0 0 7.07 7.07l1.71-1.71"></path>
    </svg>
  </button>
  <span
    id="tt-link"
    popover="hint"
    class="pointer-events-none my-1.5 rounded-md bg-primary px-2.5 py-1.5 text-xs whitespace-nowrap text-primary-foreground translate-y-1 opacity-0 transition-[opacity,translate,overlay,display] transition-discrete duration-100 open:translate-y-0 open:opacity-100 starting:open:translate-y-1 starting:open:opacity-0 [position-anchor:--tt-link] [position-area:top] [position-try-fallbacks:flip-block]"
    >Insert link</span
  >
</div>

The editor-toolbar pattern: the first tooltip waits 300ms, but once one is showing, moving to the next button switches instantly. The delay resets the moment you move the mouse away.

interestfor on each button points at its tip, a popover="hint" element. The browser handles showing on hover and keyboard focus, hiding, delays, and the top layer. No group/peer wiring, no pointer-events guard.
The delay trick (via Emil Kowalski), written once on the wrapper: [&>button]:[interest-delay-start:0.3s] makes the first tooltip wait, and [&:has(:interest-source)>button]:[interest-delay-start:0s] zeroes the delay while any sibling already shows interest. Moving between buttons switches tips instantly. The default interest-delay-end keeps a button’s interest “warm” for a moment after you leave it. That overlap is what makes the switch feel instant, so don’t set it to 0s.
Every button declares its own [anchor-name:--tt-*] and its tip’s [position-anchor:--tt-*] points back at it, so [position-area:top] centers each tip over its own button.
[position-try-fallbacks:flip-block] keeps tips on screen: when a tip would poke past the top of the viewport, the browser flips it below the button automatically.

The fallback story

In browsers without interest invokers the toolbar’s hover tips never appear. The buttons keep their aria-labels, so assistive tech loses nothing. If you need hover tooltips for everyone today, use the plain-CSS variant. A row of them will then share one fixed delay rather than the adaptive toolbar timing.

Browser support

Minimum stable version per engine, resolved at build time from MDN's browser-compat-data; Baseline status from the official web-features dataset. Everything degrades gracefully — the “when missing” column is the actual behavior, not a broken page.

Feature	Chrome	Edge	Firefox	Safari	When missing
Interest invokers (interestfor + popover="hint")Limited availability	142	142	✕	✕	The hover UI simply never appears — triggers keep their aria-labels and links still navigate, so nothing is lost. If you need it everywhere today, the plain-CSS technique on the Tooltip page works in every browser.
CSS anchor positioningLimited availability	129	129	147	26	The popover opens centered in the viewport (the top-layer default) instead of attached to its trigger.
Entry/exit animations (allow-discrete + @starting-style)Baseline 2024 · newly available	117	117	129	17.5	Elements appear and disappear instantly. Nothing breaks — you just lose the animation.

† @supports cannot test at-rules, so the badge checks transition-behavior: allow-discrete, which co-shipped with @starting-style in every engine.