文本过长，hover时提示框显示全部信息，否则不出现提示框

话不多说，直接上代码。
template

 <ul class="list">
      <li v-for="(item, index) in operateData" :key="index" class="list-li"
       @mouseenter="handleMouseEnter" @mouseleave="handleMouseLeave">
          <span>{{item.time}}</span>
          <span>【{{item.driver}}】</span>
      </li>
 </ul>
 <el-tooltip  placement="top" ref="tooltip" :content="tooltipContent"></el-tooltip>

css

<style lang="less" scoped>
  .list{
      font-size: 12px;
      .list-li{
        line-height: 20px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
      }
  }
</style>

js

 data () {
       tooltipContent: '',
       operateData: [{
        time: '2020-07-08 09:06',
        driver: '王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六王六'
      }, {
        time: '2020-07-08 09:06',
        driver: '王六王六王六'
      }],
 }  ,
 methods: { 
	 handleMouseEnter (event) {
	      const li = event.target
	      // 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(li, 0)
	      range.setEnd(li, li.childNodes.length)
	      const rangeWidth = range.getBoundingClientRect().width
	      if ((rangeWidth > li.offsetWidth || li.scrollWidth > li.offsetWidth) && this.$refs.tooltip) {
	        const tooltip = this.$refs.tooltip
	        // TODO 会引起整个重新渲染，需要优化
	        this.tooltipContent = li.innerText || li.textContent
	        tooltip.referenceElm = li
	        tooltip.$refs.popper && (tooltip.$refs.popper.style.display = 'none')
	        tooltip.doDestroy()
	        tooltip.setExpectedState(true)
	        tooltip.handleShowPopper()
	      }
	    },
	    handleMouseLeave (event) {
	      const tooltip = this.$refs.tooltip
	      if (tooltip) {
	        tooltip.setExpectedState(false)
	        tooltip.handleClosePopper()
	      }
	    },
    }

视图