06-讨论

13.1.3　讨论

值得一提的是， $('.tooltip') 并不是读取元素的最高效方式。出于演示目的，页面上的所有标记都进行了解析，这与 document.getElementsByTagName('*') 等价。根据文档的大小和浏览器种类，这样做可能相当慢。所以，当实际使用这些代码时，一定要指定所搜索的标记。例如，可以使用 $('a.tooltip, span.tooltip') 代替 $('.tooltip') 。虽然更现代的浏览器将把这种类选择器映射到 getElementsByClassName 或 querySelectorAll （如果可用的话），但是较老的浏览器必须首先循环读取标记名称，然后确定相关的类是否存在。

假定存在一个或者多个匹配 class="tooltip" 的元素，将动态标记附加到页面的最后，正文结束标记之前。因为在CSS文件中对 #tooltip_outer ID 应用 isplay: none ，所以这些标记还不能看到。

接下来，创建空变量 $tt_title 和 $tt_alt 。这些变量用于临时存储匹配的 class="tool tip" 元素的 title 和 alt (如果存在)属性。聪明的读者可能感到奇怪：“我们感兴趣的不是 title 属性吗？为什么要关心 alt?” 这个问题问得好。除了 title 之外，还存储 alt 属性，这只是为了防止 class="tooltip" 用于图片的情况。Internet Explorer会显示自己的工具提示，包含 alt 的内容，而我们不希望出现这种情况。

剩下的代码处理 class="tooltip" 元素。当光标悬停于这类元素之上时，存储 title 和 alt 属性，然后将两个属性设置为空字符串。这样，浏览器的默认工具提示就不会干扰自定义工具提示。把 title 属性的内容复制到 #tooltip_inner , 然后显示 #tooltip_outer 。

同样，当鼠标离开目标元素时，我们希望撤销鼠标第一次进入时发生的操作。隐藏 #tooltip ，把 #tooltip_inner 内容设置为空串，而 title 和 alt 属性恢复为原始值。

最后， .mousemove() 方法在光标进入 class="tooltip" 元素范围内时监控它的移动。工具提示相对于鼠标位置偏移量，出现在光标的右侧；也就是说，除非工具提示有超出浏览器宽度的危险。在这种情况下，可能出现水平滚动条，而我们不想这样。为了避免这样的混乱，用一些程序逻辑将工具栏换到光标的左侧。垂直方向也一样，如果工具提示离页面底部太远，它将换到鼠标指针的上方。