因過往的專案有使用到老牌的 popper.js 套件，想在新版複刻時發現其 2.0 版 – Floating UI 已上線一段時間。這邊感謝 Nathan 所撰寫的 利用 Vue3 撰寫 floating-ui 元件 文章，讓我能在其之上快速改寫成 tailwindcss + vue3 的 Tooltip 元件。
內容
基於 @floating-ui/dom 的版本，可以較為彈性的寫成 Vue 元件，並藉由 props 和 slot 的設定，讓使用上更加彈性。
這邊筆記下撰寫時遇到的重點：
1. 由於有使用到 flip 套件，當其與 offset 套件一同使用時，offset 的邊距數值要將 arrow 給考量進去，否則會有反覆觸發 flip 效果的情況。
例如 arrow 是距離 4px，那 offset 的邊距就會建議留 8px。
2. 用來當作 triggerItem 的元件，若要在手機與桌機都可適用的情況下，要同時監聽 touchstart, touchend, mouseEnter, mouseLeave。然後再依據是否為手機端，而阻絕掉 mouseEnter, mouseLeave
3. 撰寫單元測試時，會需要進行 flush microtasks 才能讓 @floating-ui/dom 的元件的新位置渲染完成。在 react 的版本是使用 await act(async () => {})。原生的版本則用 await new Promise((resolve) => setTimeout(resolve, 0))
程式碼
參考資料
1. getDocumentElement null during testing
2. 利用 Vue3 撰寫 floating-ui 元件
3. Floating UI is a library that helps you create “floating” elements such as tooltips, popovers, dropdowns, and more.
