Dynamic Tooltip Position with Anchor Positioning III

October 20, 2025

Here is another idea of implementation (after the first and second ones), where the tooltip adjusts its position to remain visible and follow its anchor. This time, I am considering the corner positions.

CSS-only tooltip and anchor element

#anchor { position: absolute; anchor-name: --anchor;}#tooltip { --d: .5em;  --s: .8em;  position: absolute;  position-anchor: --anchor; position-area: top left; --_m: calc(var(--d) + (sqrt(2) - 1)*var(--s)); margin: var(--_m) 0 0 var(--_m); inset: 0 var(--d) var(--d) 0; position-try: flip-inline,flip-block,flip-block flip-inline;  anchor-name: --tooltip; clip-path: inset(calc(-1*var(--d)));}#tooltip:before,#tooltip:after { content:""; position: fixed; width: anchor-size(--tooltip width); height: anchor-size(--tooltip height); z-index: -1; background: inherit; position-anchor: --anchor; margin: inherit; position-try: flip-inline flip-block;}#tooltip:before { position-area: top left; clip-path: polygon( var(--d) calc(var(--s) + var(--d)),0 0,calc(var(--s) + var(--d)) var(--d), calc(100% - var(--d)) calc(100% - var(--d) - var(--s)),100% 100%,calc(100% - var(--d) - var(--s)) calc(100% - var(--d)))}#tooltip:after { position-area: top right; clip-path: polygon( var(--d) calc(100% - var(--s) - var(--d)),0 100%,calc(var(--s) + var(--d)) calc(100% - var(--d)), calc(100% - var(--d)) calc(var(--d) + var(--s)),100% 0,calc(100% - var(--d) - var(--s)) var(--d))}

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

Click "debug mode" To see how both pseudo-elements are creating the tails.

Dynamic Tooltip Position with Anchor Positioning II A tootlip that finds the best position to remain visible all the time. October 13, 2025
Conditional Border Radius with Modern CSS A simple trick to control the border-radius based on the screen/container size. October 10, 2025