"智能" 工具提示
重要性：5
编写一个函数，当访问者将鼠标移动到元素上时显示工具提示，但当鼠标穿过元素时不显示。
换句话说，如果访问者将鼠标移动到元素上并停留在那里 - 显示工具提示。如果他们只是将鼠标穿过，则无需显示，谁想要额外的闪烁？
从技术上讲，我们可以测量鼠标在元素上的速度，如果速度慢，我们假设它是“移动到元素上”并显示工具提示，如果速度快，则忽略它。
为此创建一个通用对象 new HoverIntent(options)。
它的 options
elem- 要跟踪的元素。over– 当鼠标移入元素时调用的函数：即鼠标缓慢移动或停留在元素上。out– 当鼠标离开元素时调用的函数（如果之前调用了over）。
使用此对象实现工具提示的示例
// a sample tooltip
let tooltip = document.createElement('div');
tooltip.className = "tooltip";
tooltip.innerHTML = "Tooltip";
// the object will track mouse and call over/out
new HoverIntent({
elem,
over() {
tooltip.style.left = elem.getBoundingClientRect().left + 'px';
tooltip.style.top = elem.getBoundingClientRect().bottom + 5 + 'px';
document.body.append(tooltip);
},
out() {
tooltip.remove();
}
});演示
如果快速将鼠标移到“时钟”上，则不会发生任何事情；如果缓慢移动或停留在上面，则会出现工具提示。
请注意：当光标在时钟子元素之间移动时，工具提示不会“闪烁”。
算法看起来很简单
- 在元素上放置
onmouseover/out处理程序。也可以在这里使用onmouseenter/leave，但它们不太通用，如果我们引入委托，它们将无法工作。 - 当鼠标光标进入元素时，开始在
mousemove上测量速度。 - 如果速度慢，则运行
over。 - 当我们离开元素，并且执行了
over时，运行out。
但是如何测量速度呢？
第一个想法可能是：每 100ms 运行一个函数，并测量前一个坐标和新坐标之间的距离。如果距离很小，则速度很慢。
不幸的是，在 JavaScript 中无法获取“当前鼠标坐标”。没有像 getCurrentMouseCoordinates() 这样的函数。
获取坐标的唯一方法是监听鼠标事件，例如 mousemove，并从事件对象中获取坐标。
因此，让我们在 mousemove 上设置一个处理程序来跟踪坐标并记住它们。然后，每 100ms 比较它们。
附注：解决方案测试使用 dispatchEvent 来查看工具提示是否正常工作。