工具提示和预览卡怎么选？
一句话做出判断
工具提示只放短标签或提醒。预览卡会显示人物、对象或链接的更多信息。
几个字就够时，用工具提示。预览能省下一次跳转时，用预览卡；键盘和触控也要能打开。
看看每个界面模式会做什么
先试试每个例子，再看它适合处理什么工作。
Tooltip
↗ 工具提示
工具提示是控件的一小段说明。当鼠标悬停或键盘焦点移到图标时，它会出现，而且本身不能操作。
role="tooltip"只有图标的按钮获得键盘焦点时，会显示“复制链接”，但焦点不会离开按钮。
- 什么时候用
- 需要补充简短控件标签时，要让工具提示在鼠标悬停和键盘焦点时都能出现。
- 什么时候不要用
- 工具提示里不要放操作、一定要读的说明或长篇内容。
- 代码里的名称
role="tooltip"
Hover Card
↗ 悬浮信息卡
悬浮信息卡是内容较多的预览，当鼠标悬停在引用对象上或键盘焦点移入时打开，而且不会挡住页面。
HoverCard鼠标悬停在作者名称上，就能看到简介和关注人数，不必打开完整个人页。
- 什么时候用
- 可选的预览信息能帮助用户更快决定下一步时，就使用悬浮信息卡。
- 什么时候不要用
- 不要把必要信息藏在悬停后面，因为触摸设备不一定能可靠打开。
- 代码里的名称
HoverCard
快速比较
| 界面模式 | 最适合 | 不适合 | 代码里的名称 |
|---|---|---|---|
| 工具提示Tooltip | 需要补充简短控件标签时，要让工具提示在鼠标悬停和键盘焦点时都能出现。 | 工具提示里不要放操作、一定要读的说明或长篇内容。 | role="tooltip" |
| 悬浮信息卡Hover Card | 可选的预览信息能帮助用户更快决定下一步时，就使用悬浮信息卡。 | 不要把必要信息藏在悬停后面，因为触摸设备不一定能可靠打开。 | HoverCard |
上线前检查
- 01
先写下用户要完成什么事。
- 02
测试键盘、焦点、触控、缩放、加载、空白与错误状态。
- 03
不用鼠标悬停或动画，也要能取得相同信息。
- 04
放入真实内容，并在小屏幕和大屏幕上测试。
04
可以直接复制的比较需求
团队还不知道该选哪一种界面模式时，可以复制这段需求。
请在 工具提示（Tooltip）、悬浮信息卡（Hover Card） 中，为真实用户流程选出最合适的界面模式。判断规则：工具提示只放短标签或提醒。预览卡会显示人物、对象或链接的更多信息。。请写下任务、内容量和打断流程的代价，并检查键盘、触控、加载、错误与减少动态效果。说明选择理由，再沿用项目的设计系统，做出最小且无障碍的版本。