关于react.js:React制作全局Tooltip文字提示组件

32次阅读

共计 2146 个字符，预计需要花费 6 分钟才能阅读完成。

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

正文完