el-table组件内容过长时显示tooltip

<div v-if="showOverPopover.isOpen && isTextTooLong(scope.column,scope.row[item.fieldName])" class="textover">
     <el-popover
           :width="showOverPopover.width"
           placement="left"
           popper-class="el-popover_tableFilter"
           trigger="hover">
           <div class="content" :style="{'max-height':showOverPopover.maxHeight + 'px'}">
               {{scope.row[item.fieldName]}}
           </div>
           <span slot="reference">{{scope.row[item.fieldName]}}</span>
     </el-popover>
  </div>
  <div v-else> {{scope.row[item.fieldName]}}</div>

methods: {
        //判断字段是否超出表头宽度
        isTextTooLong({realWidth, width},name){
            if(realWidth){
                return realWidth < this.getTextWidth(name)
            }else{
                return width < this.getTextWidth(name)
            }
        },
        //获取单元格字段宽度
        getTextWidth(str){
            var width = 0;
            var html = document.createElement('span');
            html.innerText = str;
            html.className = 'getTextWidth';
            document.querySelector('body').appendChild(html);
            width = document.querySelector('.getTextWidth').offsetWidth;
            if(isIE()||isIE11()) {
                document.querySelector('.getTextWidth').removeNode(this);
            }else {
                document.querySelector('.getTextWidth').remove();
            }
            function isIE(){
                if(!!window.ActiveXObject || "ActiveXObject" in window){
                    return true;
                }else{
                    return false;
                }
            }
            function isIE11(){
                if((/Trident\/7\./).test(navigator.userAgent)){
                    return true;
                }else{
                    return false;
                }
            }
            return width;
        }
}