title属性样式不可调整 ,element-toolTip组件在有些情况下无法使用(比如swiper 无限滚动时)

写一个全局监听方法

js 复制代码
const parentDom = document.body
mounted() {
    document.body.addEventListener('mouseover', this.handleOver)
    // document.body.addEventListener('mouseleave', this.removeDom)
  },
  methods: {
    handleOver(e){
      var target = e.target;
      target.removeEventListener('mouseleave', this.removeDom)
      if (target.getAttribute('tooltip')) {
        // const parentDom = document.body
        // const parentDom = document.querySelector('#dv-full-screen-container')
        let tooltipText = target.getAttribute('tooltip'); //  获取当前所需文本
        // console.log(target)
        // 在此处编写点击事件处理逻辑
        const curStyle = window.getComputedStyle(target, '');
        // 获取当前hover元素的宽高和位置 用来确定 弹窗的位置
        let targetObj = target.getBoundingClientRect()
        console.log(targetObj)
        console.log(targetObj.top);
        // console.log(curStyle.width)
        // console.log(curStyle.height)

        const tooltip = document.createElement('div');
        tooltip.className = 'tooltipCls';
        tooltip.innerHTML = tooltipText;
        parentDom.appendChild(tooltip);
        tooltip.style.cssText = `
          display: inline-block;
          max-width: 500px;
	        max-height: 400px;
          position: fixed;
	        top: ${targetObj.top - 10}px;
          left: ${targetObj.left + (parseFloat(targetObj.width) / 2)}px;
          padding: 10px;
          overflow: auto;
          font-size: 14px;
	        color: #fff;
	        background: rgba(0, 0 , 0, .8);
	        border-radius: 5px;
	        z-index: 19999;
          transform: translate(-50%, -100%);
	      `;
        target.addEventListener('mouseleave', this.removeDom)
      }
    },
    removeDom({target}){
      // console.log(target)
      if (target.getAttribute('tooltip')) {
        setTimeout(() => {
          const tooltip = document.querySelector('.tooltipCls')
          // console.log(tooltip)
          tooltip && parentDom.removeChild(tooltip);
        }, 100);
      }
    }

  },
  beforeDestroy() {
    document.body.removeEventListener('mouseover', this.handleOver)
    document.body.removeEventListener('mouseleave', this.removeDom)
  }
相关推荐
阿亮爱学代码2 分钟前
日期与滚动视图
java·前端·scrollview
欧米欧5 分钟前
STRING的底层实现
前端·c++·算法
2301_8148098612 分钟前
踩坑实战pywebview:用 Python + Web 技术打造轻量级桌面应用
开发语言·前端·python
LIO15 分钟前
Vue 3 实战——搜索框检索高亮的优雅实现
前端·vue.js
_thought19 分钟前
踩坑记录:Vue Devtools(Vue2版)在火狐浏览器上,未在控制台显示
前端·javascript·vue.js
pancakenut19 分钟前
从盒模型到画布:以mapbox为例
前端·canvas
珎珎啊24 分钟前
前端-闭包
前端
军军君0126 分钟前
数字孪生监控大屏实战模板:交通云实时数据监控平台
前端·javascript·css·vue.js·typescript·前端框架·echarts
DanCheOo37 分钟前
从脚本到 CLI 工具:用 Node.js 打造你的第一个 AI 命令行工具
前端·aigc
木斯佳37 分钟前
前端八股文面经大全:腾讯PCG前端暑期二战一面·深度解析(2026-04-22)·面经深度解析
前端·面经·实习