<!--
 * @Descripttion: tooltip组件
 * @version: 2.0
 * @Date: 2023年12月11日16:17:52
 * @LastEditTime: 2023年12月11日23:17:52
-->

<template>
  <el-tooltip :content="content" :placement="placement" :disabled="!showTooltip">
    <span class="sc-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>
.sc-tooltip-content {
  max-width: 100% !important;
  display: inline-block;
}
</style>