Dynamic Tooltip Position with Anchor Positioning

October 06, 2025

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 { position: absolute; anchor-name: --anchor;}#tooltip { --d: 1em;  --s: 1.2em;  position: absolute;  position-anchor: --anchor;  position-area: top; bottom: var(--d); margin-top: var(--d);  position-try-fallbacks: flip-block;  anchor-name: --tooltip;}#tooltip:before { content:""; position: fixed; z-index: -1; width: var(--s); background: inherit;  top: calc(anchor(--tooltip top ) - var(--d)); bottom: calc(anchor(--tooltip bottom) - var(--d));  left: calc(anchor(--anchor center) - var(--s)/2); margin: inherit;  clip-path: ;}

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

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.

• 3D Box using Modern CSS Combining corner-shape and modern CSS features to create a 3D box. September 27, 2025
• CSS Shapes using corner-shape Recreate all the common CSS shapes using corner-shape and border-radius. September 24, 2025