demo · v131

Tooltip Grid

A data grid where every cell has an info button — all sharing the same CSS anchor name (--cell-anchor). Without anchor-scope, duplicate names no longer resolve locally and tooltips drift away from their own buttons. With anchor-scope on each grid cell, each tooltip resolves its anchor locally and appears next to its own button.

browser support anchor-scope requires Chrome 131+. In unsupported browsers the fallback positions each tooltip with position: absolute; bottom: 100%; left: 0 relative to the cell — still functional, just not anchor-positioned.
checking…

why anchor-scope matters here

Every .cell-info-btn carries anchor-name: --cell-anchor. Without scoping, the duplicate names stop resolving locally and each tooltip can drift away from its own button. anchor-scope: --cell-anchor on each .grid-cell partitions the table: each cell is its own scope, so position-anchor: --cell-anchor inside a popover resolves to whichever anchor is within the same cell scope.

the code

.grid-cell {
  /* Partition the anchor table — each cell is its own scope */
  anchor-scope: --cell-anchor;
}

.cell-info-btn {
  anchor-name: --cell-anchor; /* same name in every cell */
}

.cell-tooltip {
  position-anchor: --cell-anchor; /* resolves to THIS cell's button */
  inset-area: block-start span-inline-end; /* older fallback */
  position-area: block-start span-inline-end;
  /* ... */
}

see also