「智慧型」工具提示
重要性：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 來查看提示工具是否正常運作。