VXE-Grid 表格 Tooltip 不显示问题排查
在使用 VXE-Grid 进行表格开发时,showOverflow 属性常用于处理单元格内容的溢出显示。将其设置为 tooltip 可以自动展示完整内容,但在实际项目中偶尔会遇到提示框无法弹出的情况。
基础配置
根据官方文档,showOverflow 支持多种模式。当设为 tooltip 时,默认启用 tooltip 效果;若设为 false,表格宽度将依据内容自适应。
gridOptions: {
showOverflow: 'tooltip',
// 其他配置...
}

常见问题与解决方案
1. 插槽标签选择错误
如果在自定义插槽中使用了 <div> 标签包裹内容,可能会导致 tooltip 失效。VXE-Grid 内部逻辑通常期望使用 <span> 标签来触发文本溢出检测。
参考建议:检查你的列定义,确保插槽根节点为 span 标签。
2. 层级覆盖问题 (z-index)
有时 tooltip 虽然生成了,但被其他元素遮挡。此时需要手动提升 tooltip 容器的层级。
添加如下全局样式即可解决:
.vxe-table--tooltip-wrapper {
z-index: 99 !important;
}
这样能确保提示框始终浮于页面其他组件之上。


