关于react.js: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