AI 摘要：文章主张 <Tooltip> （提示框）组件在设计系统中不应独立存在，因为它常被误用，导致可访问性和一致性问题。作者认为应通过更高层级的组件（如带有 title 属性的 <Button>、<IconButton>、<InfoIcon> 等）来统一提示行为。这种做法能确保键盘操作可达性、用户体验一致性，并减少错误使用的可能，是“限制创造力反而带来更好设计”的典型案例。

1. 问题背景：为什么 Tooltip 容易被误用
• Tooltip 在网页中常被视为简单组件，但其实现需兼顾可访问性（Accessibility）与交互性（Interactivity）。
• 很多设计系统提供 <Tooltip> 组件，却被开发者误用或滥用。
• 根因在于这是一个抽象层级过低的组件，不易强制正确实践。

2. 键盘交互问题（Keyboard Interactivity）
• 非交互元素（如纯图标或徽章）包裹 Tooltip，导致使用键盘导航的用户无法触发提示。
• 举例：Material UI 的 <Tooltip> 示例在非交互元素上无法聚焦。
• React Aria 提供更佳方案：不为非交互元素显示 Tooltip，并通过 <Focusable> 组件确保焦点可达。

3. 用户体验一致性（Least Surprise Principle）
• Tooltip 容易出现在不合适的位置，如句中词语或无法预测的界面处。
• 缺乏一致性会让用户预期混乱、有的图标无说明、有的却多余提示。
• 结论：Tooltip 使用应可预测且统一。

4. 替代方案与系统设计（Higher-level Pattern Components）
• 不提供通用 Tooltip，而是通过更高层级组件统一规则：
• <Button> 或 <Link> 增加可选 title 属性。
• <IconButton> 强制要求 title 属性，保证含义明确。
• <InfoIcon> 明确显示“更多信息”图标，内部控制提示逻辑。
• <InfoText> 组件强调文字说明，可聚焦且视觉可区分。
• 通过这些约束可提升一致性与可访问性。

5. “限制反而带来创造力”的思考
• 限制 Tooltip 的使用让团队重新思考信息展示方式。
• 空间不足时，应改进界面而非“藏信息”。
• 设计系统的目标：减少误用、提升用户体验。

tkdodo.eu

Tooltip Components Should Not Exist

A look at why tooltip components are often the wrong abstraction in design systems, leading to accessibility issues, misuse, and inconsistent user experiences.

AI 摘要：文章以开发者视角概览 CSS 长度单位，强调 px 在高密度屏幕上已是“虚拟像素”并非绝对单位；屏幕端应优先 rem 以尊重用户字号设置提升可访问性，应用端用视口单位（viewport）适配全屏，打印场景用物理单位；并细分 vh/vw/vi/vb 及 sv*/lv*/dv* 的差别与适用时机，同时给出 em、% 的陷阱与 ch/ex/cap 等小众单位的用途。

1. 基础与绝对单位
• px 已虚拟化：在高像素密度（retina）设备上代表逻辑像素而非物理像素，因此不再“绝对”。
• 打印用物理单位：cm/mm/q/in/pc/pt 设计为打印介质；不同打印机 DPI 差异巨大，屏幕端不宜使用。
• 打印建议：为确保一致输出，优先使用打印友好单位或相对单位以适配不同分辨率。

2. 相对单位
• %（百分比）：相对包含块（containing block）；当元素 absolute 定位时，包含块判定更复杂，易出错。
• em：相对父元素 font-size，组件嵌套会累积放大/缩小，需谨慎。
• rem：相对根元素 html 的 font-size，组件在不同容器中保持一致尺寸；浏览器默认 16px，可用 html{font-size:62.5%} 将 1rem ≈ 10px（便于心算，非必须）。
• 可访问性（accessibility）：以 rem 构建能尊重用户自定义字号；纯 px 布局可能忽略用户设置并导致可读性问题。

3. 视口单位（viewport）
• 基本单位：vh/vw（视口高/宽）、vmin/vmax（较小/较大维度），vi/vb 随书写方向（writing-mode）切换，横排时 vi≈vw、vb≈vh，竖排语言会反转。
• 尺寸变体：sv*（浏览器控件可见时的“小”视口）、lv*（控件隐藏时的“大”视口）、dv*（当前动态视口，随控件显隐变化）。未指明前缀的 v* 等同于 lv*。
• 实战提示：全屏布局用 dvh 更贴合当前高度；为避免移动端地址栏显隐导致跳动，可按需组合 svh/lvh/dvh。

4. “奇特”单位与适用场景
• ch（“0”的宽度）、ex（“x”的高度）、cap（大写字母高度，适合图标对齐文本）、ic（CJK“水”字宽度）、lh（父元素行高）、rlh（根元素行高）。
• 适配文字排版和细粒度对齐；因支持度差异，需评估兼容与降级策略。

5. 实践要点与推荐方案
• 打印：使用 mm 等物理单位获得精确尺寸，或配合相对单位确保跨设备一致性。
• 网页：以 rem 为主，选用 1rem=10px 的设定仅为心算便利；避免全用 px 影响可访问性。
• Web 应用：用 dvh/dvw 填充视口，结合 vi/vb 适配不同 writing-mode。
• 选型原则：优先考虑用户设置与设备独立性、布局稳定性与可维护性，再选最贴合场景的单位。

6. 常见陷阱
• 绝对定位元素用百分比时误判包含块，导致尺寸/位置异常。
• 盲目使用 px 使布局对用户字号调整不敏感，影响可读性与无障碍。
• 移动端 100vh 在地址栏显隐时引发布局跳动，应改用 dvh 或配合 svh/lvh。

Scott Logic

Making Sense of CSS Length Units

For junior developers just starting with CSS, the vast array of available length units can feel overwhelming. This post offers a clear breakdown of the main categories - absolute units; relative units, which adapt better to different screen sizes and accessibility…