React-制作全局Tooltip文字提示组件

前言

最近项目中使用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;'

总结

1、先要理解下实现思路，有了思路实现起来就简单了，实在不知道可以看看别人的代码。
2、最重要的一点其实是如何获取被提示组件或者元素的位置坐标信息，所以e.currentTarget.getBoundingClientRect()代码非常重要。
3、有了坐标就可以设置tooltip要显示的位置了，不过还需要手动调整一下，top:${top-42}px;left: ${left-79}px。

引用

CSS Tooltip
getBoundingClientRect
MDN getBoundingClientRect