10.4　添加工具提示

工具提示是提供补充信息的一种常用方式。当访问者把鼠标光标放在一个链接、单词、照片或任何页面元素上的时候，它们都可以触发较小的弹出窗口。它们常常用来显示一个单词的定义、照片的标题，或者甚至更详细的信息，诸如一个事件的时间、成本和位置。

工具提示背后的思想相当简单：鼠标光标移动到一个元素上，显示靠近鼠标光标悬停元素的另一个元素（通常是一个＜div＞标签），鼠标光标移动到元素之外，工具提示消失。你已经学习了完成这一点所需的所有编程知识，因此，我们将通过一个按部就班的教程来实现这点。

你将学习组合CSS、HTML和JavaScript来产生如图10-9所示的效果。我们使用HTML来标识一个工具提示触发器（鼠标光标悬停其上的对象），并且构建工具提示。使用CSS来为工具提示窗口提供基本的外观，并且最终使用JavaScript来在页面载入的时候隐藏工具提示。我们还要为页面上所有的工具提示触发器添加一个hover事件处理程序。

10.4.1　HTML

工具提示有两个组成部分：第一个组成部分是工具提示本身，这是当访问者的鼠标光标悬停在触发器上的时候所出现的元素；第二个组成部分是触发器，就是诸如图像、链接、标题、段落或＜span＞标签这样的元素。

工具提示是一个＜div＞标签，它带有一个tooltip的class以及一个唯一的ID。你可以将额外的HTML放入诸如标题、段落和图像的div标签中。然而，不要插入链接，因为它们无法正常工作：鼠标光标悬停在要单击的链接的工具提示上的时候，会导致鼠标光标离开触发器，这将导致工具提示消失。

10.4　添加工具提示 - 图1

图　10-9　工具提示是带有补充信息的一个框。当访问者的鼠标光标悬停在另一个元素（一个触发器，页面上圆圈圈出的部分）之上的时候，它们会弹出到页面之上，当访问者的鼠标光标移动到元素之外的时候，它们会消失

如下是基本的工具提示的HTML：

＜div class="tooltip"id="aardvarkTooltip"＞

＜h2＞The Aardvark＜/h2＞

＜p＞A medium-sized, burrowing, nocturnal mammal native to Africa＜/p＞

＜/div＞

尽管我们可以将工具提示div放在页面的HTML中的任何地方（大多数时候，它们处于隐藏状态），但是放置这些工具提示的很好的一个地方是，直接放在结束＜/body＞标签之前。这个位置之所以很好，是因为它避免了任何可能的奇怪的显示问题，而如果将它们放置于任何已经绝对或相对定位的另一个标签内部，则有可能引发奇怪的显示问题。

触发器可以是任何元素，一个＜h1＞标签、一个＜div＞标签或一个＜img＞标签。如果你仅仅想要把一个单词或几个单词作为触发器，你需要将这些单词包含在一个＜span＞标签中。触发器需要两段信息才能工作：

·一个class名称。所有的触发器需要共享相同的class名称，例如trigger。Class名称是必需的，因为我们的JavaScript代码能够识别出页面上的触发器，并且应用正确的事件处理程序来打开和关闭相关的工具提示。

·标识工具提示的数据。每个触发器都有相关联的工具提示。工具提示是通常不可见的一个＜div＞标签，但是，当访问者的鼠标光标悬停到触发器上的时候，它会显示出来。每个工具提示都需要一个唯一的ID，并且，我们需要一种方式来将触发器与正确的工具提示div关联起来，以便当访问者的鼠标光标悬停到一个触发器上的时候，知道要显示哪一个div。一种简单的方法是，将工具提示的ID嵌入到触发器的一个属性中（在名称前添加一个#，使用jQuery来选择正确的工具提示将真的变得很容易）。HTML5允许你使用data前缀将数据嵌入到HTML标签中。

例如，假设一个工具提示的触发器是单词aardvark。鼠标光标悬停在其上，将会打开工具提示（实际上，是页面上带有aardvarkTooltip的ID的一个＜div＞标签）。你可以将该单词包含到一个＜span＞中，如下所示：

＜span class="trigger"data-tooltip="#aardvarkTooltip"＞aardvark＜/span＞

HTML5的定制data属性功能真的很不错。它允许Web设计者将各种信息嵌入到标签中，而随后可以用JavaScript来获取这些信息。要了解HTML 5 data属性的详细说明，请访问http：//html5doctor.com/html5-custom-data-attributes/。

如果你一直使用XHTML 1或HTML 4.01 doctypes，并且担心验证，你无法使用data属性。相反，你可以为标签搭载一个有效的HTML 4属性（例如title）：

＜span class="trigger"title="#aardvarkTooltip"＞aardvark＜/span＞

在这种方法中，使用一个title属性并不是该属性本意的用法，并且，一些设计师可能不会赞同这种方法。可能更好的方法是采用HTML 5的方法，并且使用定制的data属性。

你可以在页面中放置任意多个触发器和工具提示。