AI 摘要：文章是 Temani Afif 系列博文《Perfectly Pointed Tooltips》的第三篇，重点介绍如何在 CSS 中使用 Anchor Positioning API 将 tooltip（提示框）的箭头精准定位到锚点（anchor）的四个角落。作者通过 margin 控制间距、clip-path 实现遮罩、anchor-size() 获取锚点尺寸等一系列技巧，展示如何让 tooltip 更灵活地响应位置变化，并指出未来 Anchor Positioning Level 2 将带来更多动态布局可能性。

1. 背景与目标
• 延续前两篇 tooltip 教程，本篇聚焦「指向角落」的布局挑战。
• 仅 Chrome 与 Edge 目前完全支持所用特性。
• 本次重点是探索新定位与隐藏技巧，非基础概念重复。

2. 定义 tooltip 位置信息
• 使用 position-area: top left、top right、bottom left、bottom right 指定初始角落位置。
• 利用 position-try-fallbacks: flip-inline, flip-block, ... 实现自动翻转（flip）策略。
• 解释为何此配置能灵活调整尺寸但在添加尾部（tail）时复杂度更高。

3. 添加尾部 (Tail) 的新思路
• 使用伪元素 ::before 并引入 Anchor Positioning API 的 anchor-size() 函数。
• 绘制覆盖锚点的方形区域，并基于变量 --d（间距）与 --s（半径、尾部大小）动态扩展尺寸。
• 通过 clip-path 制造四角尾部形状，可替换为渐变、SVG、shape() 等方式实现个性化设计。

4. 隐藏多余的尾部
• 核心技巧：clip-path: inset(0) margin-box;
• clip-path 基于 margin-box 创建可视区域，仅保留一个角的尾部。
• 虽然伪元素为 fixed 定位，但仍属于 tooltip 内容，可被父元素裁切。

5. 扩展与实作练习
• 展示多种使用同技巧更新的示例及 debug mode 调试展示。
• 鼓励读者重新实现前两篇的版本作练习，并尝试新增曲线尾部样式。

6. 总结与展望
• 通过 Anchor Positioning API 可以让 tooltip 的行为更动态、更响应式。
• 强调现代 CSS 已超越单纯静态样式，可跨元素定义交互定位。
• Anchor Positioning Level 2 预计引入可查询 fallback 位置与更灵活的动态控制。

Frontend Masters

Perfectly Pointed Tooltips: To The Corners

Ready for the last challenge?