v150 · CSS · demo

Progressive Enhancement

Two product cards — one using a simple absolute-positioned tooltip as a fallback, and one that applies @supports named-feature(anchor-position-follows-transforms) to use a more precise anchor-positioned version in Chrome 150+.

Feature detection results in this browser

CSS.supports("named-feature(...)") …
named-feature(anchor-position-follows-transforms) …
position-anchor and anchor() primitives …

Pin the tooltips and transform both info icons to compare the fallback placement against the named-feature-enhanced placement. The right card uses real anchor-positioning rules when the browser reports the named feature; older browsers can preview the same declarations manually.

Measuring tooltip placement…
Fallback — no named-feature() test
Ceramic Mug
SKU: MUG-01 · In stock
ⓘ
Dishwasher-safe · 350ml capacity

Uses position: absolute relative to the card. When the icon is transformed, the tooltip stays at the card's original edge.

Enhanced — @supports named-feature()
Glass Teapot
SKU: TEA-02 · In stock
ⓘ
Heat-resistant borosilicate · 600ml

In Chrome 150+: tooltip tracks the icon even through CSS transforms.

CSS comparison

Without named-feature()
.tooltip { /* Simple absolute positioning — doesn't account for transforms */ position: absolute; bottom: calc(100% + 6px); left: 0; } /* Works everywhere, but the tooltip won't track transforms on the anchor */
With named-feature() — Chrome 150
/* Base style — works everywhere */ .tooltip { position: absolute; … } /* Enhanced when transform tracking is available */ @supports named-feature( anchor-position-follows-transforms ) { .icon { anchor-name: --product-info; } .tooltip { position-anchor: --product-info; top: calc(anchor(bottom) + 6px); left: anchor(center); transform: translateX(-50%); } }

see also

implementation reference

Need the exact API surface, compatibility boundaries, errors, lifecycle, and source links? Read the matching gendn reference ↗