el-tooltip超出文字长度进行显示_el-tooptip设置文本最大长度超过悬浮显示

<template>
  <div class="text-tooltip">
    <el-tooltip
      class="item"
      :disabled="isShowTooltip"
      :content="content"
      :placement="placement"
    >
      <p class="over-flow" :class="className" @mouseover="onMouseOver(refName)">
        <span ref="refConName">{{ contentName  }}</span>
        <span :ref="refName">{{ content || "--" }}</span>
      </p>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  name: 'textTooltip',
  props: {
    // 名称
    contentName: {
      type: String,
      default: ""
    },
    // 显示的文字内容
    content: {
      type: String,
      default: ""
    },
    // 位置
    placement: {
      type: String,
      default: "top"
    },
    // 外层框的样式，在传入的这个类名中设置文字显示的宽度
    className: {
      type: String,
      default: ""
    },
    // 为页面文字标识（如在同一页面中调用多次组件，此参数不可重复）
    refName: {
      type: String,
      default: ""
    }
  },
  data () {
    return {
      isShowTooltip: true
    }
  },
  methods: {
    onMouseOver (str) {
      let parentWidth = this.$refs[str].parentNode.offsetWidth;
      let contentWidth = this.$refs[str].offsetWidth;
      let contentNameWidth = this.$refs['refConName'].offsetWidth;
      // 若子集比中间层更宽 开启tooltip功能"
      if ((parentWidth - contentNameWidth) < contentWidth) {
        this.isShowTooltip = false;
      } else { // 否则 关掉tooltip功能
        this.isShowTooltip = true;
      }
    }
  }
}
</script>
<style lang="scss" scoped>
.over-flow {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.over-flow span:first-child {
  color: #2c2e33;
}
.over-flow span:nth-child(2) {
  color: #797f8c;
  }
// 传递不同的className 在此组件中写控制样式
.wid190 {
  width: 100%;
}
p {
  margin: 0;
}
</style>

   <Tooltip-over  :content="formParams.cooperationModeName"  :contentName="'合作方式：'"  class="wid190" refName="cooperationModeName"></Tooltip-over>