demo · v131
responsive tooltip offset scaled to the anchor
The tooltip's vertical offset from its anchor is anchor-size(--target height) * 0.25. As you resize the target with the slider, the gap auto-scales. Before v131, anchor-size() was sizing-properties-only; now it works in top, left, margin-*, etc.
hover me
scaled offset
before v131
You had to compute the offset with JavaScript: read the anchor's getBoundingClientRect().height, multiply, write to style.top. That broke under transitions because resize events don't fire mid-animation. Now CSS does it natively.
the api
.tooltip {
position: absolute;
position-anchor: --target;
/* offset is 25% of the anchor's own height */
top: calc(anchor(bottom) + anchor-size(--target height) * 0.25);
left: anchor(left);
/* margin too */
margin-right: calc(anchor-size(--target width) * 0.1);
}