el-tree组件在内容超出长度时出现提示框

树形组件的提示框需要自定义，如下：

<el-tree ref="tree" :data="treeData" node-key="id" :default-expanded-keys="expandList" :props="defaultProps"
      @node-expand="treExpand" @node-click="handleNodeClick" class="tree-wrap" :indent="40">
      <el-tooltip :disabled ="showTitle"   effect="dark" :content="tooltipTitle" placement="top"  slot-scope="{ node, data }" >
        <span class="span-ellipsis"  @mouseover="onShowNameTipsMouseenter">{{node.label}}</span>
      </el-tooltip>
</el-tree>

methods中：

onShowNameTipsMouseenter(e) {
      var target = e.target;
      let textLength = target.clientWidth;
      let containerLength = target.scrollWidth;
      if (textLength < containerLength) {
        this.tooltipTitle = e.target.innerText;
        this.showTitle = false;
      } else {
        this.showTitle = true;
      }
    },

css样式：

.span-ellipsis {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
  margin-right: 20px;
}