<template>
	<el-tooltip
		effect="dark"
		:content="content"
		popper-class="common-prompt-popper"
		placement="top"
		:show-after="500"
	>
		<div class="text-ellipsis">
			<slot>{{ content }}</slot>
		</div>
	</el-tooltip>
</template>

<script setup>
defineProps({
	content: {
		type: String,
		default: ""
	}
});
</script>

<style scoped>
.text-ellipsis {
	white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
	width: 100%;
	cursor: pointer;
}
</style>

<style>
.common-prompt-popper.el-popper {
	padding: 8px 16px !important;
	border-radius: 10px !important;
	background-color: rgb(59, 65, 75) !important;
	font-size: 16px !important;
	font-weight: 400 !important;
	font-family: "Microsoft YaHei" !important;
	line-height: 30px !important;
	color: #fff !important;
	border: none !important;
}

.common-prompt-popper.el-popper .el-popper__arrow::before {
	background-color: rgb(59, 65, 75) !important;
	border-color: rgb(59, 65, 75) !important;
}
</style>
