<template>
  <el-tooltip
    ref="tlp"
    :content="text"
    effect="dark"
    :disabled="!tooltipFlag"
    :placement="placement"
    class="tooltip"
  >
    <div
      class="tooltip-wrap"
      @mouseenter="handleTooltipIn($event)"
      @mouseleave="handleTooltipOut($event)"
    >
      {{ text }}
    </div>
  </el-tooltip>
</template>
<script>
  export default {
    name: 'HtEllipsisTooltip',
    props: {
      // 字符内容
      text: {
        type: String,
        default: '',
      },
      // tooltip显示位置
      placement: {
        type: String,
        default: 'top-start',
      },
    },
    data() {
      return {
        tooltipFlag: false, // 是否显示tooltip
      }
    },
    mounted() {},
    methods: {
      handleTooltipIn(event) {
        // scrollWidth: 对象的实际内容的宽度，不包边线宽度，会随对象中内容超过可视区后而变大。
        // offsetWidth对象整体的实际宽度，包滚动条等边线，会随对象显示大小的变化而改变。
        this.tooltipFlag = event.target.scrollWidth > event.target.offsetWidth
      },
      handleTooltipOut(event) {
        this.tooltipFlag = false
      },
    },
  }
</script>
<style>
  .tooltip-wrap {
    width: 100%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
</style>
