结合Elementui实现文字溢出才展示Tooltip

场景：表格中内容溢出展示...鼠标移上去展示tooltip。

虽然elementui的表格有内容溢出显示tooltips的配置项，但是只适用于简单的数据展示，如果自定义的内容，或者默认展示两行再溢出就不适用，所以，参考elementui的实现方式进行自己的修改。

 <el-table :data="tableData">
      <el-table-column prop="name" label="name">
        <template slot-scope="scope" >
          <div class='table_name '>
            <div @mouseover='handleCellMouseEnter' @mouseleave="handleCellMouseLeave">{{ scope.row.name}}</div>
          </div>
        </template>
      </el-table-column>
 </el-table>
<el-tooltip effect='dark' placement="top" ref="tooltip" :content='tooltipContent'></el-tooltip>

.table_name {
  font-size: 16px;
  line-height: 22px;
  font-weight: 500;
  display: -webkit-box;
  color: #101010;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  display: -moz-box;
  -moz-line-clamp: 2;
  -moz-box-orient: vertical;
  overflow-wrap: break-word;
  word-break: normal;
  white-space: normal;
  overflow: hidden;
}

1、一个简单的表格，列可以是任何自定义的html结构，样式也是两行展示。

主要是定义一个鼠标移入和移除的方法

2、随便在哪个位置加一个el-tooltip

js部分（vue3）

export default defineComponent({
    const tooltip = ref(null);
    const tooltipContent = ref("");

    const handleCellMouseEnter = (e)=>{ //鼠标进入触发的方法
      const textDom = e.target.parentNode.querySelector(".table_name");
      if (!textDom) {
        return;
      }
      //获取可见元素的长度
      const cw = textDom.clientWidth;
      const range = document.createRange();
      //创建一个div，塞到看不见的地方，把内容放进去，并获取他的长度
      let dom = document.createElement('div') 
      dom.innerHTML = textDom.innerHTML
      dom.style.position = 'fixed'
      dom.style.left = '50000px'
      dom.style.whiteSpace = 'nowrap'
      dom.id='tempDom'
      document.querySelector('body').append(dom)

      range.setStart(dom, 0);
      range.setEnd(dom, dom.childNodes.length);
      //获取 长度
      const rangeWidth = range.getBoundingClientRect().width;
      //获取完删除dom
      document.querySelector('body #tempDom').remove()
      //对比内容长度和可见长度的大小，这里是两行展示所以除以2再对比
      if (rangeWidth/2 > cw) {
        //设置tooltip的内容
        tooltipContent.value = textDom.innerText || textDom.textContent;
        tooltip.value.referenceElm = textDom;
        tooltip.value.$refs.popper && (tooltip.value.$refs.popper.style.display = 'none');
        tooltip.value.doDestroy();
        tooltip.value.setExpectedState(true);
        tooltip.value.handleShowPopper()
        tooltip.value.$refs.popper.style.height = `auto`
        tooltip.value.$refs.popper.style.maxWidth = `${cw * 2}px`
        tooltip.value.$refs.popper.style.transform = `translate(0 ,-10px)`
      }
    }
    const handleCellMouseLeave = ()=> {
      if (tooltip.value) {
        //关闭tooltip
        tooltip.value.setExpectedState(false);
        tooltip.value.handleClosePopper();
      }
    }
    return{
        tooltip,
        tooltipContent,
        handleCellMouseEnter,
        handleCellMouseLeave 
    }
})

用长度来判断的可能会因为word break导致不准，所以改进一下使用宽度来判断

    const handleCellMouseEnter = (e) => {
      const textDom = e.target.parentNode.querySelector(".table_name") || e.target.parentNode.querySelector(".table_owner") ;
      if (!textDom) {
        return;
      }
      const cw = textDom.clientWidth;
      const ch = textDom.clientHeight;
      const range = document.createRange();
      let dom = document.createElement("div");
      dom.innerHTML = textDom.innerHTML;
      dom.style.position = "fixed";
      dom.style.left = "50000px";
      dom.style.width = cw+'px'
      // dom.style.whiteSpace = "nowrap";
      dom.style.wordBreak = 'break-word'
      dom.id = "tempDom";
      document.querySelector("body").append(dom);
      range.setStart(dom, 0);
      range.setEnd(dom, dom.childNodes.length);
      const rangeHeight = range.getBoundingClientRect().height;
      document.querySelector("body #tempDom").remove();
      if (rangeHeight > ch) {
        tooltipContent.value = textDom.innerText || textDom.textContent;
        tooltip.value.referenceElm = textDom;
        tooltip.value.$refs.popper &&
          (tooltip.value.$refs.popper.style.display = "none");
        tooltip.value.doDestroy();
        tooltip.value.setExpectedState(true);
        tooltip.value.handleShowPopper();
        tooltip.value.$refs.popper.style.height = `auto`;
        tooltip.value.$refs.popper.style.maxWidth = `${cw * 2}px`;
        tooltip.value.$refs.popper.style.transform = `translate(0 ,-10px)`;
      }
    };