Page 40 - JavaScript修炼之道

28 第三部分 UI技巧

任务 12 打造漂亮的 tooltip

保守地说，HTML自带的tooltip（用 title= 实现）并不可靠。自动换行、拉伸与截断之间
的相互作用、换行以及显示延迟，这些都随浏览器和用户而变。而且那只是纯文本提示——没有
样式，当然也没有标记结构。

为了打造漂亮的tooltip，我们需要自己动手实现：放置一些元素，在鼠标移入或移出页面特
定区域时显示或者隐藏它们（或者可以在用户使用Tab切换焦点时显示或隐藏，这样可能更好用）。

由于本书主题是JavaScript，我就不深究CSS代码了。另外，我只做简单的设计：这里的tooltip
不会覆盖触发元素的显示、不跟随鼠标移动，也不在里面提供鼠标操作的UI。

所以，根据我们的目的，实现的关键是：用CSS属性设置tooltip元素为默认隐藏，并在其容
器标签上（不一定是链接）加:hover 选择器来恢复其显示，如下图所示。

但这种实现方式在IE6中不起作用，因为IE6只允许 <a> 元素上有:hover。这时只能手动编
写一段脚本以响应mouseover和mouseout。由于Prototype实现show()和hide()的方式比较特殊，
因此没办法用CSS预先隐藏tooltip——这就是为什么要在右页的CSS样例中针对IE6做一些特殊设
置的原因。

如果要实现更高级的需求，你有很大几率能在众多tooltip库中找到合适的——它们要么是直
接写在框架里，要么是基于某个框架。就我个人而言，最喜欢的是Prototype的tooltip库——无比
①
强大的Prototip2。

——————————
① 参见http://www.nickstakenburg.com/projects/prototip2/。