【UX专题】说明气泡Tooltips

一、4种常见说明气泡

Tooltips: Element翻译做“文字提醒”。轻度交互，hover激活

popup tips:可翻译做 “弹窗提醒”。轻度交互，点击激活

popover: Element翻译做“弹出框”，是基于VUE开发的，与Tooltips类似。可嵌套多种类型信息、操作，可hover激活、click激活。

Popconfirm: Element翻译做“气泡确认框”。点击弹出气泡确认框

二、比较

Tooltips和popup tips的比较 4种气泡的图示

三、Tooltips的说明

1、定义

ToolTips 是一个类似于一个悬浮的文本框，在鼠标指针移动上去能显示特定的文本

2、状态

Tooltips可以处于激活和未激活的状态。如果它们在这些状态之间转换，应该会很快发生(150毫秒或更少)。

3、场景

Tooltips可以依附于页面中任何激活的元素（图标、文字链接、按钮，等等）。它们为配对的元素提供描述或解释。因此，tooltips与界面中的元素相关联并具有特定性

4、轻量级

并不会用它来解释大图或整个的任务流。

5、用户主动悬浮触发

在页面中主动弹出来告知用户新的功能或如何使用一个具体的功能的提示不是tooltips。

6、适用于桌面端

由于tooltips是由悬停手势触发出来的，他们只能在设备上通过鼠标或键盘触发。在触摸屏上通常不可用。（将来，tooltips可以在眼控设备上触发，当用户将视线聚焦在界面某个特定元素一段时间便可触发）

四、Tooltips指南

1、关键信息不要使用tooltips

没有tooltips的帮助用户也应可以完成任务。tooltips用来解释一些不常见的表单字段，但是字段要求不应该放在tooltips中。如图，不应将密码格式要求放在tooltips中，但是可以在tooltips照片那个说明这个字段的作用。

2、tooltips的内容简短且有用

带文字的图标这类很明显的信息就不要再用tooltips说明了，显得冗余

3、支持鼠标和键盘hover

维基百科中的tooltips，鼠标和键盘都可以触发

4、当页面上相邻的多个元素都有hover时，使用带箭头的tooltips样式，避免混淆

5、界面中的tooltips要有一致性。tooltips需要用户主动hover才能触发，所以要有一致的规律才便于用户发现它们。

其他建议

1、为没有文字的图片提供tooltips

2、tooltips的颜色要与背景有对比性

3、不要让tooltips遮挡了界面中原本的内容，否则用户需要吧鼠标移开再移回来

越是追求极简，tooltips就越多，用户学习成本越高。所以使用tooltips时想一下：用户在完成任务时一定需要这个信息吗？如果不需要你就可以使用tooltips，否则请直接放到页面中。

---

参考资料：NNG 《Tooltip Guidelines》