React製作全域性Tooltip文字提示元件

Awbeci發表於2023-01-11
React元件

前言

最近專案中使用antd的tooltip元件的時候發現它有點不穩定，經常會出現漂浮到左上角的情況，讓人困惑之餘還不知道如何解決，再加上它是在每個dom上面新增的tooltip這樣資料量一大的話就會產生冗餘的dom元素，於是想起react-tooltip元件，它可以在全域性設定tooltip，並且只要在想要提示的dom上面新增data-tip='xxxx'即可，而且我專案中也是用的這個元件，但是最近發現一個問題，就是v5版本的寫法和v4差別非常大，於是衝動之下自己寫一個tooltip以滿足自身需求，分享給大家。

操作

tooltip元件的實現步驟：
1、建立一個懸浮的dom div，並且設定一下基本樣式且是隱藏狀態

元件：

const tooltipRef = useRef(null)
const [content, setContent] = useState(null)

<div className={styles.tooltip} ref = {tooltipRef }>
   {content}
</div>

這裡程式碼解釋一下const tooltipRef = useRef(null)的作用就是透過ref控制tooltip元素的位置，後面會講到。
const [content, setContent] = useState(null)的使用就是你tooltip想顯示的內容，這裡可以自定義。

樣式：

.tooltip{
    display: flex;
    position: fixed;
    align-items: center;
    justify-content: center;
    height: 34px;
    width: 170px;
    background-color: #000;
    color: #fff;
    visibility: hidden;
    z-index: 100;
    border-radius: 6px;
    font-size: 12px;
}

// 製作三角箭頭
.tooltip::after {
    content: " ";
    position: absolute;
    top: 100%; /* At the bottom of the tooltip */
    left: 50%;
    margin-left: -5px;
    border-width: 5px;
    border-style: solid;
    border-color: black transparent transparent transparent;
}

上面都是基礎樣式加三角箭頭。

2、在你想要提示的dom元素上面新增hover事件

// 滑鼠移開
onMouseLeave={(e,value,currentDate) => {
  // 滑鼠移開的時候要隱藏tooltip 
  tooltipRef.current.style = `visibility:hidden;`
}}
// 滑鼠進入
onMouseOver={(e, value, currentDate)=>{
  // 獲取你的dom元素距離視窗的left和top，這個left和top就是你tooltip相對的位置
  const { left, top } = e.currentTarget.getBoundingClientRect();
  // 有了left和top我們設定tooltip的位置，並且要設定visibility為顯示狀態
  tooltipRef.current.style = `visibility:visible;top:${top-42}px;left: ${left-79}px`
  if (!value || !value.date) {
    setCalContent(`提交 0 次，${currentDate}`)
  }else{
    setCalContent(`提交 ${value.count} 次，${value.date}`)
  }
}}

這裡你的元件或者dom元素上面有兩個事件：onMouseOver和onMouseLeave。
onMouseOver的使用就是滑鼠移動到上面的時候
2.1、首先獲取元素的位置座標資訊
const { left, top } = e.currentTarget.getBoundingClientRect();
2.2、有了座標我們就要讓tooltip顯示到那裡
tooltipRef.current.style = `visibility:visible;top:${top-42}px;left: ${left-79}px`
2.3、並且設定顯示的內容
setCalContent(xxxx)

最後不要忘了滑鼠移開的時候要隱藏tooltip，這樣就完成了tooltip的全部製作。
tooltipRef.current.style = 'visibility:hidden;'
image.png

總結

1、先要理解下實現思路，有了思路實現起來就簡單了，實在不知道可以看看別人的程式碼。
2、最重要的一點其實是如何獲取被提示元件或者元素的位置座標資訊，所以e.currentTarget.getBoundingClientRect()程式碼非常重要。
3、有了座標就可以設定tooltip要顯示的位置了，不過還需要手動調整一下，top:${top-42}px;left: ${left-79}px。

引用

CSS Tooltip
getBoundingClientRect
MDN getBoundingClientRect

相關文章