JavaScript 中的有限状态机，第 1 部分: 设计一个小部件

核心提示： 更为精致的工具提示内置的工具提示还有很多可待提高之处，一些流行浏览器的最新版本为构建更为精致的工具提示提供了所需的 “原料”，JavaScript 中的有限状态机，第 1 部分: 设计一个小部件(4)，HTML Division 元素创建了一个可在浏览器窗口的任何地

更为精致的工具提示

内置的工具提示还有很多可待提高之处，一些流行浏览器的最新版本为构建更为精致的工具提示提供了所需的 “原料”。HTML Division 元素创建了一个可在浏览器窗口的任何地方放置的提示框。通过级联样式表(CSS)，您几乎可以设定框体外观的各个方面。用 JavaScript 编程实现的光标移动可以触发浏览器窗口内任意可视元素的特定动作。您还可以编制一个定时器来控制这些动作的顺序。

在 样例页面 可以找到具有这类工具提示的一些 HTML 元素。如果运行的是流行浏览器的最新版本，您就可以将更为精致的工具提示和内置的工具提示做一对比：

这类工具提示是淡入淡出的，而不是突然弹出和突然消失。

这类工具提示包含图像和文本，并经很好的格式化和样式化处理。

可见时，这类工具提示可以随光标移动。

当光标从 HTML 元素移出然后又移回此元素时，淡入淡出会反转方向。

同时可有多个工具提示可视，一些淡出，一些淡入。

这些增强的行为和外观不仅有修饰的作用，还可以提高可用性。面对有数十个或数百个元素的繁忙页面，用户很可能会错过即刻弹出的工具提示。人类的视觉系统对运动的物体十分敏感，因而也更容易注意到淡入视野并随鼠标而动的工具提示，即使用户的注意力不在这儿也没关系。对比未格式化过的文本，图像、格式化和样式化能更有效地传递信息。而且，这些更为精致的工具提示的所有参数都是可配置的。

本文后面的内容将着重于介绍如何将 FadingTooltip 小部件设计为一个有限状态机。本系列的后续文章会为您展示如何实现和测试这些代码。如果您急于想知道这些代码，也可以在 参考资料 部分找到到相关 JavaScript 源代码和使用这些代码的一个 HTML Web 页面的链接。