10.4.3　JavaScript

从最基本的要求来看，工具提示只是显示，然后，当访问者的鼠标光标悬停在一个触发器上的时候消失掉。在本书第6章，我们已经了解了如何让元素出现和消失。然而，还有更多的内容要继续了解。任何工具提示的一个关键部分，是将其放置到触发器附近。这涉及使用jQuery函数来确定一个元素的高度、宽度和位置。这是需要技巧的部分。为了使这个过程更清晰，本教程将把工具提示编程分解为3个部分：

1.隐藏工具提示。

当页面载入的时候，所有的工具提示（位于页面底部的div标签）都应该隐藏。当然，你应该在页面载入之前，在CSS中完成这些，但是，使用不支持JavaScript的浏览器的任何访问者都不能够访问工具提示内容。如果工具提示内容不是必需的信息，并且如果某些访问者（包括搜索引擎）不能看到工具提示也没关系，那么，继续并且在CSS中隐藏工具提示：

.tooltip{

display：none；

}

2.给触发器添加一个mouseover事件处理程序。

这一部分是工具提示功能的核心。当访问者的鼠标光标悬停在触发器之上的时候，需要发生一些事情：

·需要显示相关工具提示的div。

·工具提示需要放置在触发器附近。为了做到这点，你需要确定触发器元素的当前位置。此外，你想要确保工具提示不会覆盖住触发器，并且，工具提示不会扩展到屏幕之外。

3.给触发器添加一个mouseout事件。

这一部分很简单，只需要在访问者的鼠标光标离开触发器的时候隐藏div即可。为了了解具体编程是如何进行的，我们来看看教程并且创建自己的工具提示。