:show-overflow-tooltip设置展示在下便

Element UI 表格 show-overflow-tooltip 属性配置
在Element UI框架中，表格组件的el-table-column标签支持show-overflow-tooltip属性来处理内容超出单元格宽度的情况。此属性允许开发者指定当文本过长而被截断时，通过悬停触发提示框展示完整信息[^1]。
对于希望自定义tooltip显示的位置（如底部），可以通过覆盖默认样式实现这一需求。具体做法是在项目中加入特定CSS规则调整.el-tooltip__popper类的选择器，增加transform-origin以及margin-top等样式属性控制气泡方向和偏移量：
.el-tooltip__popper.is-dark {
transform-origin: center bottom;
}
/* 调整距离顶部的距离 */
.popover-class{
margin-top: 8px !important;
}
登录后复制
另外需要注意的是，在HTML模板部分应用这些样式时，可能还需要给对应的列加上额外class以便更精确地定位并作用于目标元素上:
<template>
<div id="app">
<el-table :data="tableData" style="width: 100%">
<!-- 使用slot-scope获取当前行数据 -->
<el-table-column prop="date" label="日期" width="180"></el-table-column>
<el-table-column
class-name="custom-tooltip"
show-overflow-tooltip
prop="name"
label="姓名"
width="180">
</el-table-column>
</el-table>
</div>
</template>

<style scoped>
.custom-tooltip .cell:hover+.el-tooltip__popper.is-dark {
/* 自定义tooltip位置 */
top: calc(100% + 5px);
left: auto;
right: 0;
}

.custom-tooltip >>> .el-tooltip__popper.is-dark {
max-width: none; /* 取消最大宽度限制 */
}
</style>
登录后复制
上述代码片段展示了如何利用:hover伪类配合相邻兄弟选择器(+)针对具有.custom-tooltip样式的单元格定制其下拉提示框的具体外观与行为[^4]。