<template>
  <div class='tooltip-wrap formTooltip'>
    <el-tooltip
      ref='tlp'
      :content="text"
      effect='dark'
      :disabled="!tooltipFlag"
      :placement="placement">
        <div class='over-flow' @mouseenter="visibilityChange($event)">{{ text }}</div>
    </el-tooltip>
  </div>
</template>
 
<script>
export default {
  name: 'tooltipWrap',
  props: {
    text: { default: '' },
    placement: { type: String, default: 'top-start' },
    className: { type: String, default: 'text' }
  },
  data() {
    return {
      disabledTip: false,
      tooltipFlag: false
    };
  },
  methods: {
    visibilityChange(event) {
      const ev = event.target;
      const ev_weight = ev.scrollWidth;
      const content_weight = this.$refs.tlp.$el.parentNode.clientWidth;
      if (ev_weight > content_weight) {
        this.tooltipFlag = true;
      } else {
        this.tooltipFlag = false;
      }
    }
  }
};
</script>