在iView页面中，当内容超出显示范围时再启用Tooltip组件

 使用方法

<TextTooltip :content="contentValue"></TextTooltip>

给Tooltip再包装一下

<template>
  <Tooltip transfer :content="content" :theme="theme" :disabled="!showTooltip" :max-width="300" :placement="placement"
    class="cell-tooltip">
    <span ref="content" :class="[className]" @mouseenter="handleTooltipIn" @mouseleave="handleTooltipOut"
      class="cell-tooltip-content">{{ content }}</span>
  </Tooltip>
</template>
<script>
export default {
  name: 'TextTooltip',
  props: {
    content: String,
    className: String,
    theme: {
      type: String,
      default: () => {
        return 'dark';
      }
    },
    placement: {
      type: String,
      default: () => {
        return 'bottom';
      }
    },
  },
  data() {
    return {
      showTooltip: false // 是否需要禁止提示
    };
  },
  methods: {
    handleTooltipIn() {
      const $content = this.$refs.content;
      this.showTooltip = $content.scrollWidth > $content.offsetWidth;
    },
    handleTooltipOut() {
      this.showTooltip = false;
    }
  }
};
</script>
<style lang="less" scoped>
.cell-tooltip {
  width: 100%;
  display: flex;
  align-items: center;

  .cell-tooltip-content {
    display: block;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}
</style>