使用锚点定位实现动态工具提示位置 III

October 20, 2025

2025 年 10 月 20 日

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.

这是另一种实现思路（继第一个和第二个之后），tooltip 会调整自身位置以保持可见并跟随其 anchor。这次我考虑了角落位置。

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:

这是一个可交互的演示，你可以拖动 anchor 并观察 tooltip 的表现：

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

点击“debug mode”查看两个伪元素如何共同构成尾部。

Dynamic Tooltip Position with Anchor Positioning II A tootlip that finds the best position to remain visible all the time. October 13, 2025
Dynamic Tooltip Position with Anchor Positioning II 一个始终自动寻找最佳位置以保持可见的 tooltip。2025 年 10 月 13 日
Conditional Border Radius with Modern CSS A simple trick to control the border-radius based on the ...