vue+elemen实现el-tooltip在文本超出区域后浮现

<el-tooltip ref="tooltip" :content="tooltipContent" />

					   <div
                           class="card-carousel--card--footer"
                           @mouseenter="handleDivMouseEnter($event)"
                           @mouseleave="handleDivMouseleave($event)"
                         >
                           <p class="topicStyle"> {{ info } </p>
	                   </div>

import debounce from 'throttle-debounce/debounce'
import { getStyle } from '@/utils/dom.js

created() {
     this.activateTooltip = debounce(50, tooltip => tooltip.handleShowPopper())
},

// 鼠标移入
handleDivMouseEnter(event) {
        const target = event.target
        // 判断是否text-overflow, 如果是就显示tooltip
        let child = target.querySelector('.groupItemClass')
	    // 在此处我一共有三个class控制三块class，这一块主要是对<el-menu>以及文本区域控制，所以class要有多个。
        // 如果区域宽度被限定，则通过高度判断
        let heightFlag = false
        if (!child) {
          child = target.querySelector('.setItemClass')
          if (!child) {
            // 文本区域 
            child = target.querySelector('.topicStyle')
          }
        }
        if (child.scrollHeight > child.offsetHeight) {
            heightFlag = true
        }
        // use range width instead of scrollWidth to determine whether the text is overflowing
        // to address a potential FireFox bug: https://bugzilla.mozilla.org/show_bug.cgi?id=1074543#c3
        const range = document.createRange()
        range.setStart(child, 0)
        range.setEnd(child, child.childNodes.length)
        const rangeWidth = range.getBoundingClientRect().width // 文本区域宽度
        const padding = (parseInt(getStyle(target, 'paddingLeft'), 10) || 0) +
          (parseInt(getStyle(target, 'paddingRight'), 10) || 0)
        if ((rangeWidth + padding > target.offsetWidth || child.scrollWidth > child.offsetWidth) || heightFlag && this.$refs.tooltip) {
          const tooltip = this.$refs.tooltip
          // TODO 会引起整个 Table 的重新渲染，需要优化
          this.tooltipContent = target.innerText || target.textContent
          tooltip.referenceElm = target
          tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
          tooltip.doDestroy()
          tooltip.setExpectedState(true)
          this.activateTooltip(tooltip)
        }
      }
      
// 鼠标移出  
handleDivMouseleave(event) {
        const tooltip = this.$refs.tooltip
        if (tooltip) {
          tooltip.setExpectedState(false)
          tooltip.handleClosePopper()
        }
      },