Safari 19 Introduces CSS Anchor Positioning

Apple has released Safari 19, introducing native support for CSS Anchor Positioning. This API allows developers to position elements relative to other target elements on the page using pure CSS.

It eliminates the need for heavy JavaScript layout calculations for tooltips and dropdowns.

The Tooltip Placement Problem

Historically, positioning a tooltip or dropdown required measuring coordinate boxes in JavaScript. If the page scrolled or the window resized, the coordinates had to be recalculated.

This often caused layout shifts or stuttering during scrolling.

Libraries like Popper.js and Floating UI solved this, but they added extra weight to your bundle.

Pure CSS Anchor Coordinates

With CSS Anchor Positioning, you define the relationship directly in style sheets. You mark one element as the anchor and position the target relative to it.

<!-- HTML Popover trigger -->
<button id="my-anchor" popovertarget="my-tooltip">Options</button>
<div id="my-tooltip" popover>Tooltip info!</div>

/* CSS setup linking the two elements */
#my-anchor {
  anchor-name: --anchor-options;
}

#my-tooltip {
  position: absolute;
  position-anchor: --anchor-options;
  bottom: anchor(top);
  left: anchor(center);
  margin-bottom: 8px;
}

The browser handles all positioning and recalculations internally. This results in smoother rendering.

Automatic Fallback Handling

The API also supports automatic positioning fallbacks. If there isn't enough space to display a tooltip above the anchor, the browser will automatically position it below.

You can configure fallback strategies using @position-try declarations:

#my-tooltip {
  position: absolute;
  position-anchor: --anchor-options;
  /* Top is primary, fallback to bottom if no space */
  position-try-options: --bottom-fallback;
}

@position-try --bottom-fallback {
  top: anchor(bottom);
  bottom: auto;
  margin-top: 8px;
}

This reduces the complexity of managing viewport boundaries in your code.