[筆記] 哎呀！不小心刻了一套 React UI 元件庫 12 – Tooltip

近期為了熟悉元件 Component 的客製化，便參照「哎呀！不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tooltip。

---

[ Repo ]：https://github.com/andy922200/practice-storybook-react

---

內容

Tooltip 是一個文字彈出提醒元件，當 hover 到該元件上時，會顯示對應的內容。

為了避免 z-index 的堆疊環境設定問題，在 React 中會使用 createPortal 來簡化，讓這類 position: absolute 的元件可以另外綁定到某個 DOM id 上面。

---

參數

1. placement：相對於傳入的核心內容，Tooltip 的出現位置可以粗略分為 Top, Right, Bottom, Left。這四個方向各自再分為 Top 和 Bottom 或是 Left, Right，所以一共有 12 種組合
2. showArrow：產生一個矩形旋轉 45 度後，再將超出的地方隱藏即可。實作時，可以先將多餘的地方顯示出來，等之後再隱藏
3. content: 提示文字
4. children: 核心內容
5. themeColor

---

Tooltip 的位置相關移動

[ top ]

1. X axis
   1. top-left：0
   2. top：座標原點往右半個 children，再倒退 50% 的 Tooltip
   3. top-right：用 translateX (-100%) 當做基礎，再加上 children 的寬度
2. Y axis
   1. 用 translateY (-100%) 當做基礎，再減掉 gap → 形同從核心元素本身上移到上方再多出 gap 的高度

[ bottom ]

1. X axis
   1. bottom-left：0
   2. bottom：座標原點往右半個 children，再倒退 50% 的 Tooltip
   3. bottom-right：用 translateX (-100%) 當做基礎，再加上 children 的寬度
2. Y axis
   1. 用 children 的高度當做基礎，再加上 gap

[ right ]

1. X axis
   1. 用 children 的寬度當做基礎，再加上 gap
2. Y axis
   1. right-top：0
   2. right：用 translateY (-50%) 當做基礎，再加上 children 的 50% 高度
   3. right-bottom：用 translateY (-100%) 當做基礎，再加上 children 的寬度

[ left ]

1. X axis
   1. 用 translateX (-100%) 當做基礎，再加上 gap
2. Y axis
   1. left-top：0
   2. left：用 translateY (-50%) 當做基礎，再加上 children 的 50% 高度
   3. left-bottom：用 translateY (-100%) 當做基礎，再加上 children 的寬度

---

程式碼

https://github.com/andy922200/practice-storybook-react/commit/400725f7b5cf4b08beb405824427b82d3d1d2dd3

---

相關文章

按讚加入粉絲團

延伸閱讀

• [筆記] HTML Input Date 最小值 最大值於 Safari 上失效
• [筆記] Vue3 元件更新 Component Update
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 34
• [筆記] 程式必修課！資料結構與演算法｜JavaScript 篇 – 35
• [筆記] The Linux Command Line: A complete Introduction 指令大全心得 – 14