demo · v143

Overflow-Aware Tooltip

Tooltips anchored with anchor-name, position-anchor, and @position-try fallback blocks. Chrome 143 adds @container anchored(...), so the badge inside each tooltip can be styled by the fallback that actually won.

Your browser does not fully support CSS Anchor Positioning or @position-try yet. The demo still renders, but tooltips may not reflow on overflow. Chrome 125+ is required for full support.

Checking anchored container query support…

Container width 480px Container height 360px

Fallback highlight

Click any button to show/hide its tooltip. Use the sliders above to resize the container and watch fallbacks activate.

How the CSS is structured

/* 1. Name the anchor element */
.trigger {
  anchor-name: --my-trigger;
}

/* 2. Position the tooltip relative to its anchor */
.tooltip {
  position: absolute;
  position-anchor: --my-trigger;
  container-type: anchored;

  /* preferred position: above */
  bottom: anchor(top);
  left: anchor(left);

  /* fallback list — tried in order */
  position-try-options: --below, --right, --left;
  position-try-order: most-block-size;
}

/* 3. Define each fallback */
@position-try --below {
  top: anchor(bottom);
  left: anchor(left);
}
@position-try --right {
  top: anchor(top);
  left: anchor(right);
}
@position-try --left {
  top: anchor(top);
  right: anchor(left);
}

/* 4. Style the tooltip's own descendants by the chosen fallback */
@container anchored(--below) {
  .fallback-badge::before { content: "--below"; }
}
@container anchored(--right) {
  .fallback-badge::before { content: "--right"; }
}
@container anchored(--left) {
  .fallback-badge::before { content: "--left"; }
}

Key properties

anchor-name — assigns a name to a positioned element so tooltips can reference it
position-anchor — links a tooltip to a specific anchor by name
container-type: anchored — lets the positioned element become the query container for its selected fallback
@position-try — defines an alternative placement block, used when the default overflows
position-try-options — ordered list of try-block names or flip keywords to attempt
position-try-order — strategy for choosing among fallbacks (most-block-size picks the one with most vertical room)
@container anchored(--name) — styles descendants based on the fallback that resolved

How the CSS is structured

Key properties

See also