建立提示行為的 JS 程式碼。

當滑鼠移到具有 data-tooltip 的元素上時，提示應出現在其上方，而當滑鼠移開時，提示應隱藏。

註解 HTML 的範例

<button data-tooltip="the tooltip is longer than the element">Short button</button>
<button data-tooltip="HTML<br>tooltip">One more button</button>

應像這樣運作

在此任務中，我們假設所有具有 data-tooltip 的元素內部只有文字。沒有巢狀標籤（目前）。

詳細資訊

• 元素與提示之間的距離應為 5px。
• 提示應盡可能相對於元素置中。
• 提示不應超出視窗邊緣。通常它應在元素上方，但如果元素在頁面頂端且沒有提示空間，則在元素下方。
• 提示內容在 data-tooltip 屬性中提供。它可以是任意 HTML。

你將需要兩個事件

• 當指標移到元素上方時，mouseover 會觸發。
• 當指標離開元素時，mouseout 會觸發。

請使用事件委派：在 document 上設定兩個處理常式，以追蹤所有來自具有 data-tooltip 的元素的「overs」和「outs」，並從那裡管理工具提示。

在行為實作後，即使不熟悉 JavaScript 的人也可以新增註解元素。

P.S. 一次只會顯示一個工具提示。

開啟一個沙盒來執行任務。