demo · v143

Arrow flip

The motivating use case from the spec discussion: a tooltip arrow that has to point at the anchor regardless of which fallback position was chosen. Click each fallback to see the arrow rotate via @container anchored(--name).

Checking anchored container query support…
target
Tooltip body — fallback selected: below

Without anchored container queries, the arrow had to be flipped from JavaScript by re-querying the rendered position. Now CSS handles it from the same query that picked the fallback in the first place.

the CSS pattern

.target {
  anchor-name: --target;
}

.tooltip {
  position: absolute;
  position-anchor: --target;
  position-try-options: --below, --above, --right, --left;
  container-type: anchored;
}

/* Descendant restyling per chosen fallback */
@container anchored(--below) { .arrow { transform: translateX(-50%) rotate(-45deg); } }
@container anchored(--above) { .arrow { transform: translateX(-50%) rotate(135deg); } }
@container anchored(--right) { .arrow { transform: translateY(-50%) rotate(-135deg); } }
@container anchored(--left)  { .arrow { transform: translateY(-50%) rotate(45deg); } }

why this angle

The other concept shows the popover moving as the anchor moves; this one zooms in on the single biggest pain-point — an arrow that has to flip with the fallback. It was the leading example in CSSWG discussion threads when this feature was proposed.

see also