<div class="prompt">
<el-tooltip class="item" effect="dark" placement="bottom-end">
<template #content>
<div class="w-15rem">
{{ data?.name || prompt }}
</div>
</template>
{{ prompt }}
</el-tooltip>
</div>
<style lang="scss" scoped>
.prompt {
width: 100%;
height: 1.31rem;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.96);
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
</style>原始的代码如上，测试发现悬浮到内容上会出现异常的错误，渲染的内容，不在文本下方。
解决流程
网上搜索（Element UI中el-tooltip位置偏差问题解决方案全解析）发现，我设置了 prompt overflow: hidden 可能会导致悬浮内容被拆切或者位置错乱，
这里我尝试设置append-to-body 发现没有效果。
尝试将 prompt 的 overflow: hidden 去掉, 发现位置还是存在偏移，但是很明显，偏移的高度就是内容的高度。那么很明显了，只需要将prompt 包裹一层 div 然后设置超出省略即可。
.prompt {
width: 100%;
height: 1.31rem;
font-size: 1rem;
font-weight: 400;
letter-spacing: 0px;
color: rgba(255, 255, 255, 0.96);
&-content {
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
}
}