前言
最近我的项目中应用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