CSS Tip

Dynamic Tooltip Position with Anchor Positioning IV

Another demo using Anchor Positioning and Tooltips. This time, the tail will have a stretchy behavior when the tooltip gets closer to the edges.

CSS-only tooltip with stretchy arrow

#anchor {
  position: absolute;
  anchor-name: --anchor;
}
#tooltip {
  --d: 1.2em; /* distance between tooltip and anchor */
  --s: 1.5em; /* size of the tail */ 
  
  position: absolute;
  position-anchor: --anchor;
  bottom: var(--d);
  position-area: top;
  margin: var(--d) var(--d) 0;
  position-try: flip-block; 
  anchor-name: --tooltip;
}

#tooltip:before,
#tooltip:after {
  content:"";
  position: fixed;
  background: inherit;
  inset-block: calc(anchor(--tooltip inside) - var(--d));
  left: calc(anchor(--anchor center) - var(--s)/2);
  right: calc(anchor(--tooltip center) - var(--s)/2);
  margin-block: inherit;
  clip-path: polygon(min(50%,100% - var(--s)) var(--d),calc(var(--s)/2) 0,100% var(--d),100% calc(100% - var(--d)),calc(var(--s)/2) 100%,min(50%,100% - var(--s)) calc(100% - var(--d)));
}
#tooltip:after {
  left: calc(anchor(--tooltip center) - var(--s)/2);
  right: calc(anchor(--anchor center) - var(--s)/2);
  clip-path: polygon(max(50%,var(--s)) var(--d),calc(100% - var(--s)/2) 0,0 var(--d),0 calc(100% - var(--d)),calc(100% - var(--s)/2) 100%,max(50%,var(--s)) calc(100% - var(--d)));
}

Drag the anchor in the demo below to see how the tooltip and its tail behave:

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

More CSS Tips