IT博客汇
  • 首页
  • 精华
  • 技术
  • 设计
  • 资讯
  • 扯淡
  • 权利声明
  • 登录 注册

    React制作全局Tooltip文字提示组件

    Awbeci发表于 2023-01-10 21:03:01
    love 0

    前言

    最近项目中使用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;'
    image.png

    总结

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

    引用

    CSS Tooltip
    getBoundingClientRect
    MDN getBoundingClientRect



沪ICP备19023445号-2号
友情链接