Chart.js 有提供內建的 tooltip 外，也可以自行打造。雖說官網上有範例程式碼可用，不過搭配 @floating/ui 套件的話，應該可降低不少判斷功夫。
這邊筆記下作法。
內容
虛擬參考點
先由 getVirtualReference 函式將 Chart.js 提供的相對座標（ caretX, caretY，相對於 Canvas）轉換為瀏覽器視窗（ Viewport ）的絕對座標，並提供一個具有 getBoundingClientRect 方法的物件給 Floating UI 使用。內部有一個寬高為 0 的「點」，給 Tooltip 能夠精準地對準滑鼠懸停的位置。
computePosition
內部用了 Floating UI 封裝好的 middleware，確保數據點與 Tooltip 之間有空隙 ( offset )；如果空間不足，會自動翻轉 ( flip )；如果太寬超出螢幕，那會自動 shift
此外 tooltip 樣式中的 pointerEvents: ‘none’，確保滑鼠懸停在 Tooltip 上時不會干擾到圖表的觸發事件
