CSS Tip

The Lazy Tooltip Follower

Another demo featuring tooltips and Anchor Positioning. This time, I am relying on the fact that you can apply a transition to the inset properties to create a "lazy" tooltip follower. A tooltip that follows the anchor when you drag it, but with a delay.

#anchor {
  position: absolute;
  anchor-name: --anchor;
}
#tooltip {
  --w: 12em; /* tooltip width */
  --s: 4em;  /* tail size */
  
  position: absolute;
  width: var(--w);
  bottom: anchor(outside --anchor);
  left: clamp(0px,anchor(center --anchor) - var(--w)/2,100% - var(--w));
  margin-bottom: 1.5em;
  anchor-name: --tooltip;
  position-try: flip-block;
  transition: .3s .5s;
}

See the Pen The Lazy Tooltip Follower by Temani Afif (@t_afif) on CodePen.

More CSS Tips