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

基本的工具提示

当光标暂时停留于一些可视控件 —— 比如按钮、选择器或输入字段 —— 时，时下的许多图形应用程序都能暂时显示包含相应的帮助性定义、操作说明或建议的小文本框。在早期的系统中，这些小文本框被称为 “气球帮助”，在 IBM 的一些产品中，称其为 infopop，在一些 Microsoft 产品中，其名字则是 ScreenTip。在本文，我使用的是其中更为常见的术语工具提示。

现在一些流行的 Web 浏览器，比如 Netscape Navigator、Microsoft Internet Explorer、Opera 和 Mozilla Firefox，会为任何拥有 title 属性的 HTML 元素显示工具提示。例如，清单 1 中显示的这三个拥有 title 属性的 HTML 元素。

清单 1. 浏览器工具提示的 HTML 代码

Here are some
<span title='Move your cursor a bit to the right, please.'>
fields with built-in tooltips
</span>:
<input type='text'
　　　 title='Type your bank account and PIN numbers here, please ...'
　　　 size=25>
<input type='button'
　　　 title='Go ahead. Press it. What's the harm? Trust me.'
　　　 value='Press this button'>

样例页面 展示了浏览器如何呈现具有 title 属性的 HTML 元素。注意当光标在元素上移动时工具提示是如何出现和消失的。文本框包含简单的文本，这些文本无任何格式和样式。文本框会在光标短暂停留时弹出，并会在特定时间过后、鼠标从此 HTML 元素移出或单击了某键的情况下突然消失。浏览器一次只显示一个文本框。工具提示的外观和行为已经硬性设定到浏览器内，无法更改。