easydo-zcgx-web/src/components/Tooltip/index.vue

<template>
  <el-tooltip :content="content" :placement="placement" :disabled="!showTooltip">
    <span class="yh-tooltip-content overflow-ellipsis" @mouseenter.stop.prevent="onMouseenter" @mouseleave.stop.prevent="showTooltip = false">{{ content }}</span>
  </el-tooltip>
</template>

<script>
	export default {
		props: {
			placement: { type: String, default: "bottom" },
			content: { type: String, default: "" },
      		spacing: { type: Number, default: 0 }
		},

		data() {
			return {
        		showTooltip: false
			}
		},

		methods: {
			onMouseenter({ currentTarget }) {
				this.showTooltip = currentTarget.scrollWidth >= currentTarget.parentElement.offsetWidth - this.spacing
			}
		}
	}
</script>

<style lang="scss" scoped>
.yh-tooltip-content {
  max-width: 100% !important;
  display: inline-block;
}

.overflow-ellipsis {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
</style>