社区精选｜React 制作全局 Tooltip 文字提示组件

今天小编为大家带来的是社区作者 Awbeci 的文章，让我们一起来学习用 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：https://www.w3schools.com/css/css_tooltip.asp
getBoundingClientRect：https://github.com/facebook/react/issues/16201
MDN getBoundingClientRect：https://developer.mozilla.org/en-US/docs/Web/API/Element/getBoundingClientRect

---

点击左下角阅读原文，到 SegmentFault 思否社区 和文章作者展开更多互动和交流，“公众号后台“回复“ 入群 ”即可加入我们的技术交流群，收获更多的技术文章~

- END -

关注公众号：拾黑（shiheibook）了解更多

赞助链接：

关注数据与安全，洞悉企业级服务市场：https://www.ijiandao.com/
四季很好，只要有你，文娱排行榜：https://www.yaopaiming.com/
让资讯触达的更精准有趣：https://www.0xu.cn/