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

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

react logo


[ 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


相關文章

★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 29 – Toast
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Toast 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容1. Toast 是
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 28 – Modal
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Modal 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容需要引入 P
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 27 – Progress Circle
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Circle 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 26 – Progress Bar
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Progress Bar 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 25 – Skeleton
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Skeleton 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容概念1.
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 24 – Spin
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Spin 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數isLoading
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 23 – Pagination
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Pagination 的實踐方法。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數pag
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 22 – Tabs
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Tabs。[ Repo ]:https://github.com/andy922200/practice-storybook-react內容參數themeColor – 主題配色
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 21 – Drawer
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Drawer 的實踐方法 ( 需搭配 Portal 一起使用 )。[ Repo ]:https://github.com/andy922200/practice-
★全文分享★  [筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
[筆記] 哎呀!不小心刻了一套 React UI 元件庫 20 – Select
近期為了熟悉元件 Component 的客製化,便參照「哎呀!不小心刻了一套 React UI 元件庫」一書進行練習。這篇筆記下 Select 的實踐方法 ( 需搭配 Dropdown 的 Portal 一起使用 )。[ Repo ]:https://github.com/andy922
按讚加入粉絲團

延伸閱讀