弹出框和工具提示怎么选？
一句话做出判断
工具提示只说一句短提示。弹出框可以放更多文字、选项或按钮。
几个字就能说清楚时，用工具提示。需要阅读更多或直接操作时，用弹出框。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Popover
↗ 弹出框
弹出框是连在打开控件旁的小面板，可以放有结构的内容和操作，而且不会挡住整个页面。
popover attribute / Popover点击头像后，会打开小型个人资料，显示角色、联系方式和“关注”操作。
- 什么时候用
- 内容应该放在触发来源旁，而且用户仍可继续操作页面时，就使用弹出框。
- 什么时候不要用
- 只有一小段标签提示时，不要使用弹出框，请改用工具提示。
- 代码里的名称
popover attribute / Popover
Tooltip
↗ 工具提示
工具提示是控件的一小段说明。当鼠标悬停或键盘焦点移到图标时，它会出现，而且本身不能操作。
role="tooltip"只有图标的按钮获得键盘焦点时，会显示“复制链接”，但焦点不会离开按钮。
- 什么时候用
- 需要补充简短控件标签时，要让工具提示在鼠标悬停和键盘焦点时都能出现。
- 什么时候不要用
- 工具提示里不要放操作、一定要读的说明或长篇内容。
- 代码里的名称
role="tooltip"
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 弹出框Popover | 内容应该放在触发来源旁，而且用户仍可继续操作页面时，就使用弹出框。 | 只有一小段标签提示时，不要使用弹出框，请改用工具提示。 | popover attribute / Popover |
| 工具提示Tooltip | 需要补充简短控件标签时，要让工具提示在鼠标悬停和键盘焦点时都能出现。 | 工具提示里不要放操作、一定要读的说明或长篇内容。 | role="tooltip" |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 弹出框（Popover）、工具提示（Tooltip） 中，为真实用户流程选出最合适的界面模式。判断规则：工具提示只说一句短提示。弹出框可以放更多文字、选项或按钮。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。