CSS Tip

Dynamic Tooltip Position with Anchor Positioning

With anchor positioning, we can anchor an element to another and also ensure it remains visible on the screen regardless of the anchor's position. Now, imagine the element you want to anchor is a tooltip. What about its tail? We can also adjust its position to always point to the anchor.

anchor element with its tooltip shape

#anchor {
  position: absolute;
  anchor-name: --anchor;
}
#tooltip {
  --d: 1em;  /* distance between anchor and tooltip  */
  --s: 1.2em; /* tail size */
  
  position: absolute; 
  position-anchor: --anchor;
  /* place tooltip at top */
  position-area: top;
  bottom: var(--d);
  margin-top: var(--d); /* the margin is inherited by the pseudo element, it does nothing here */
  /* if it doesn't fit on the top, fall back to bottom (this will flip the margin as well) */
  position-try: flip-block; 
  anchor-name: --tooltip;
}
/* the tail */
#tooltip:before {
  content:"";
  position: fixed;
  z-index: -1;
  width: var(--s);
  background: inherit;
  /* vertical position from tootlip  */
  top:    calc(anchor(--tooltip top   ) - var(--d));
  bottom: calc(anchor(--tooltip bottom) - var(--d));
  /* horizontal position from anchor */
  left: calc(anchor(--anchor center) - var(--s)/2);
  margin: inherit; /* this will do the magic, it will hide either the top or the bottom of the shape */
  /* the arrow shape */
  clip-path: polygon(50% .2em,100% var(--d),100% calc(100% - var(--d)),50% calc(100% - .2em),0 calc(100% - var(--d)),0 var(--d));
}

Here is an interactive demo where you can drag the anchor and see how the tooltip behaves:

See the Pen Follow me if you can! (drag the anchor) by Temani Afif (@t_afif) on CodePen.

Click the "debug mode" to understand the trick. Both arrows are always visible, but the margin will update the position to simulate the "hide" effect.

More CSS Tips