<template>
  <el-tooltip class="item" :content="content" :disabled="!disable" v-bind="$attrs" ref="myToolTip">
    <template #content="scopeData">
        <slot name="content"  v-bind="scopeData || {}"></slot>
    </template>
    <template>
        <slot></slot>
    </template>
      
    </el-tooltip>
</template>

<script>
export default {
  components: {},
  props: {
    disabled:Boolean,
    content:''
  },
  data() {
    return {
        disable:true
    };
  },
  watch: {},
  computed: {},
  created() {},
  mounted() {
    this.$refs.myToolTip.$el.addEventListener('mouseenter',this.mouseenter)
  },
  methods: {
    mouseenter(e){
        var target = e.target
        const target_Width = target.scrollWidth;
        const target_content_Width= target.clientWidth;
        this.disable = target_Width > target_content_Width;
    }
  },
};
</script>
<style lang="scss" scoped>
</style>