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元素上面有两个事件:onMouseOveronMouseLeave
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;'
image.png

总结

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

引用

CSS Tooltip
getBoundingClientRect
MDN getBoundingClientRect


全栈工程师进阶
日常学习总结与分享,包括:前端、后台与运维,讲解的知识点包括:javascript、vuejs、reactjs、springb...

Awbeci

2.9k 声望
189 粉丝
0 条评论
推荐阅读
给我实现一个前端的 Excel 导入和导出功能
前言【负责人 A】:现在报表部分基于接口的 Excel 的导入和导出功能有点慢,前端这边能不能实现一下这个功能,然后我们在比对看看效果!【切图仔 B】: 接口这边不能优化一下吗?比如排查下慢的原因什么的。【负...

熊的猫19阅读 2.5k

封面图
你知道前端水印功能是怎么实现的吗?
前一段时间由于项目需要实现水印功能,于是去了解了相关的内容后,基于 Vue 的实现了一个 v-watermark 指令完成了对应的功能,其实整体内容并不复杂!

熊的猫14阅读 1.6k

封面图
2022 你还不会微前端吗 (上) — 从巨石应用到微应用
微前端系列分为 上/下 两篇,本文为 上篇 主要还是了解微前端的由来、概念、作用等,以及基于已有的微前端框架进行实践,并了解微前端的核心功能所在,而在下篇 2022 你还不会微前端吗 (下) — 揭秘微前端核心原理...

熊的猫14阅读 1.6k

封面图
大前端必备书籍
为了方便前端开发者系统学习前端知识,搜集了前端系列电子书,帮助开发者系统梳理知识体系,深入理解前端技术。更多书单请关注Github[链接] 。CSS权威指南(第四版)上册百度云CSS权威指南(第四版)下册百度云CSS揭...

码出世界13阅读 1.4k

【WebRTC 跨端通信】React + React Native 双端视频聊天、屏幕共享
之前介绍过 WebRTC,简单来说它是一个点对点的实时通讯技术,主要基于浏览器来实现音视频通信。这项技术目前已经被广泛应用于实时视频通话,多人会议等场景。

杨成功12阅读 1.6k评论 1

封面图
前端性能优化到底该怎么做(上)— 开门见山
前端性能优化 又是个听起来很高大上的词,确实是的,因为它需要 高在性能,大在范围,所幸很多大佬都已经输出了很多高质量的内容供大家参考,作者最近也在学习和了解这方面的内容,对如下文中的一些理解若有不当...

熊的猫10阅读 2.1k

封面图
如何使用 React 和 Monaco Editor 实现 Web 版 VSCode?
本项目是 React 基于 Monaco Editor 实现的 Web VSCode Demo,它的主要功能是允许在浏览器中编写 TypeScript/JavaScript 并直接运行,除此之外,它还包含如下功能:

破晓L6阅读 1.6k

Awbeci

2.9k 声望
189 粉丝
宣传栏