Tooltip Anchored to a Button

The Pattern

A button declares itself an anchor. A tooltip sibling becomes the target and uses position-area: top to sit above the button. As the button moves (resize, scroll, reflow), the tooltip follows automatically.

<button class="action">
  Save changes
</button>
<div class="tooltip" role="tooltip">
  Saves your draft to local storage. Cmd+S
</div>

.action {
  anchor-name: --save-btn;
}

.tooltip {
  position: absolute;
  position-anchor: --save-btn;
  position-area: top;
  margin-bottom: 8px;
  padding: 6px 10px;
  background: #111;
  color: #fff;
  border-radius: 4px;
  font-size: 13px;
  /* Hidden by default */
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms;
}

.action:hover + .tooltip,
.action:focus-visible + .tooltip {
  opacity: 1;
}

Why this beats Floating UI for tooltips

Floating UI's tooltip recipe is around 30 lines of JavaScript: import computePosition, schedule it on hover, listen to scroll and resize to keep the tooltip in sync, manage cleanup on unmount. The CSS-only version above is 14 lines of stylesheet and uses native browser layout — strictly faster, smaller, and more accessible (the browser handles RTL automatically; Floating UI needs an opt-in).

The 8px gap

The margin-bottom: 8px on the tooltip creates a visual gap between the trigger and the tooltip. This is the same as Floating UI's offset({ mainAxis: 8 }) middleware. With anchor positioning, you just use the box model.

Accessibility note

Add role="tooltip" and aria-describedby linking the button to the tooltip element so screen readers announce the relationship. Anchor positioning is purely visual — accessibility semantics still need to be expressed in the markup.