Overlay / 04
Tooltip · Popover
Tooltip 用纯 CSS 在四向浮出文字说明，不承载操作；Popover 挂在触发按钮旁，承载通知、操作、表单与富内容四类场景，点击外部自动收起。
Tooltip 四个方向
data-tip / data-tip-pos四向示例（鼠标悬停查看）
挂在图标与头像上
陈
林
12
99.98%
表格单元格截断提示
| 项目 | 负责人 | 状态 |
|---|---|---|
| Nexus 组件库 · 全场景企业级… | 陈嘉禾 | 运行中 |
| 商城小程序改版 · 二期视觉… | 林晏如 | 待验收 |
纯 CSS 实现
<button class="btn btn-secondary"
data-tip="默认从上方浮出">上方</button>
<button class="btn btn-secondary"
data-tip-pos="bottom"
data-tip="从下方浮出">下方</button>
<!-- 方向可选：默认 / bottom / left / right -->
提示文字取自 data-tip 属性，悬停时用 ::after 生成，无脚本依赖，也不会阻塞点击。
文案上限 18 字
Tooltip 是单行提示，超过 18 个字符应改写为 Popover 或直接放在页面上说明。
触屏设备不可依赖悬停
移动端没有 hover，关键说明必须同时以文字形式出现在界面上。
Popover 四类场景
通知 / 操作 / 表单 / 富内容① 通知型
未读通知
部署成功
v3.0.2 · 3 分钟前
新的协作邀请
陈嘉禾 · 1 小时前
配额预警
剩余 8% · 昨天
② 操作型
视图设置
③ 表单型
快速邀请
按状态筛选
④ 富内容型
林
工号NX-2026-0417
团队交互设计组
项目7 个进行中
近 7 日调用量
单位：万次
富内容型可放图表、档案与媒体，但整体高度建议不超过 420px，超出后改用抽屉。
随按钮定位与结构
anchor · anatomy五种锚点位置
左对齐（默认）
气泡左边缘与按钮左边缘对齐。
右对齐 .pop.right
气泡右边缘与按钮右边缘对齐，靠屏幕右侧时使用。
表格行内
工具条内
笔刷
粗细12
禁用态
只读角色无法修改配置，请联系管理员。
| 结构 | 类名 | 作用 |
|---|---|---|
| 定位容器 | .pop-wrap | position: relative，气泡的参考系 |
| 触发器 | [data-popover] | 点击展开，再次点击收起 |
| 气泡体 | .pop | 默认最小宽 260px，含内边距与阴影 |
| 右对齐 | .pop.right | 靠右锚定，避免超出视口 |
Tooltip 与 Popover 的选择
只是解释名词 → Tooltip；需要阅读多行内容或点击操作 → Popover；需要填写完整表单 → Modal 或 Drawer。