demo · v138

Tooltip edge cases

Scroll the scroller. Each tooltip’s headline rewrites itself depending on which position-try-fallback the browser picked — because the new @container anchored(--fallback-name) query lets the tooltip’s contents react when the layout had to flip.

checking @container anchored() support…

scroll horizontally and vertically. Each pill anchors a tooltip. The tooltip prefers below; if the viewport bottom is too close, it flips above; if both block edges are tight, it goes beside. The colored headline tells you which fallback won.

// scroll-inner is wider than the scroller. Pills are spread across the area so different positions hit different edges.

tag a

Wraps with a 6-line explanation that’s long enough to bump the viewport edge. tag b

tag b

Same tooltip, different anchor. Wider tooltip than the anchor.
tag c

tag c

Scroll down and you should see the tooltip flip to above the pill. tag d

tag d

Scroll right; this one may pop beside the pill instead.

the new bit

.tip {
  position-anchor: --p1;
  position-try-fallbacks: --flip-block, --flip-inline;
  container-type: anchored;
  top: anchor(bottom);
  left: anchor(center);
}
@position-try --flip-block { top: auto; bottom: anchor(top); }
@position-try --flip-inline { left: anchor(end); }

/* React in *content* to which fallback was applied */
@container anchored(--flip-block) {
  .tip h4::after { content: " · placed above"; color: red; }
}

Before this, you knew the popover had flipped but the popover’s contents didn’t. With anchored fallback container queries you can change padding, font size, arrow direction, even hide a tail — in the descendants — reactively.