Tooltip
鼠标悬停或键盘聚焦按钮时显示简短提示。
这是一个纯 CSS Tooltip
CSS DEVELOPMENT LAB · 16
Tooltip / Dropdown 定位
Tooltip、Dropdown、Context Menu 的共同难点不是“显示出来”， 而是“应该相对谁定位、如何跟随触发元素、如何避免坐标计算越来越复杂”。 本实验先掌握传统可靠方案，再了解 Anchor Positioning 的渐进增强思路。
TRADITIONAL PATTERN
先把 relative + absolute 用对
对大多数简单 Tooltip / Dropdown，最稳定的方案仍然是： 触发器外层建立定位上下文，浮层使用绝对定位。
Dropdown
点击按钮后显示操作菜单，定位仍然由 CSS 完成。
Right-aligned Menu
按钮靠右时，菜单可以通过 right: 0 与触发器右边缘对齐。
Arrow
Tooltip 箭头可以直接使用伪元素，不需要额外图片。
箭头来自 ::after
PROGRESSIVE ENHANCEMENT
Anchor Positioning：让浮层直接“跟着锚点走”
传统方案依赖“浮层必须位于定位父级内部”。Anchor Positioning 的思路是： 先给触发元素定义锚点，再让浮层直接引用这个锚点进行定位。
这一章不把它作为唯一方案，而是作为现代 CSS 的增强能力： 支持时使用，不支持时仍保留传统定位结构。
Anchor Popover
支持 Anchor Positioning 时，这个浮层会直接依赖锚点定位。
HOW TO CHOOSE
简单问题，不要过度工程化
简单 Tooltip / Dropdown
relative + absolute 足够
浮层需要脱离原 DOM 层级
Anchor Positioning 更有价值
复杂碰撞检测 / 智能翻转
可能仍需要专门 JS 定位方案
COMMON PITFALLS
四个高频问题
定位父级错误
absolute 会相对最近的定位祖先，而不是自动相对按钮。
被 overflow 裁掉
浮层虽然位置正确，但祖先 overflow:hidden 可能把它直接裁掉。
z-index 不生效
可能是新的 stacking context 在影响层级，而不是数字不够大。
手机端无 Hover
Tooltip 可以是辅助信息，但关键操作不能只依赖 hover 才出现。