FullCalendar 官網所提供的 Tooltip 範例，背後所採用的是 popper.js 第二代所衍生的 tippy.js。有鑑於 popper.js 都推薦大家改用 Floating-UI，這邊筆記下如何結合 FullCalendar, Vue3 和 Floating-UI 一同使用。
內容
1. Tooltip 的內容，可以由外部傳入，或是寫在 FullCalendar 內部一同使用。建議由外部傳入，可控制性更高
2. 觸發點在 handleEventDidMount 這個方法內。若要將要顯示的資訊放到這個 Tooltip 內，那就得從這邊進行微調
3. Tooltip 內要自行實作 clickOutside。可使用 @vue/use 所提供的 onClickOutside
4. fullCalendar 的「詳細資料浮動框」，其 z-index 為 9999。因此你的 Tooltip 的 z-index 需要設置成 10000
5. fullCalendar 所生成的 x, y 位置，是相對於 <html> 標籤的。換言之，要注意其上不可以包含其他的 position: relative。若你是使用 Vue3，也可以考慮 <Teleport> 來避免影響
6. 當點擊「詳細資料浮動框」內的某一個事件時，為了避免兩個 Tooltip 同時被開啟，需要用 JS 將其關閉。同時透過 document.querySelector(td[data-date="${eventStartDateStr}"]) 來獲得當下點擊的日期框的 x, y 值
7. 實作 x,y 值時，要考慮 window.scrollX 和 window.sxrollY
8. 若 tooltipX 加上 tooltip 寬度超過螢幕寬度，那就用「螢幕寬度 – tooltip 寬度 – 微調值 」來當作 tooltipX
程式碼
參考資料
1. FullCalendar v5.11.3 with event filter (multiple select, mobile + desktop view)
2. Fullcalendar add tooltip to events
按讚加入粉絲團
