v144 · css

Chart Tooltip

A bar chart inside a CSS-transformed container. Each bar has an anchor-name, and its tooltip uses bottom: calc(anchor(top) + 8px). In Chrome 144+, anchor() resolves against the post-transform visual position — the tooltip tracks the bar correctly even when the container is scaled or skewed. Pre-144 browsers would place the tooltip at the un-transformed origin.

Feature detection: checking…
1.0×
0°
0px
Bar chart — hover bars for tooltips no transform
42

Pre-144 vs Chrome 144+ behaviour

Pre-Chrome 144

When the chart container has a transform, anchor() resolved against the layout position before the transform. Tooltips appeared at the un-transformed position — far from the bar they annotate. Developers had to use JavaScript + getBoundingClientRect() to position overlays on transformed charts.

Chrome 144+

The anchor() function resolves against the visual (post-transform) bounding box. Tooltips stay glued to their bars regardless of scale, rotation, or translation applied to the containing chart. Pure CSS, no JavaScript position recalculation.

/* Each bar gets an anchor-name */
.bar[data-bar="1"] { anchor-name: --bar-1; }
.bar[data-bar="2"] { anchor-name: --bar-2; }
/* … etc */

/* Tooltip resolves anchor() against post-transform position */
.bar-tip {
  position: absolute;
  /* Position above the hovered bar */
  bottom: calc(anchor(top) + 8px);
  left: anchor(center);
  translate: -50% 0;

  position-try-fallbacks: flip-block;
}

/*
  In Chrome 144+, anchor(top) and anchor(center) are resolved
  against the visual post-transform bounding box of the anchor.

  If the chart container has:
    transform: scale(1.2) rotate(5deg);
  The tooltip still correctly appears above each scaled/rotated bar.
*/

see also