el-select 开启collapse-tags-tooltip后悬停tooltip被遮挡

Question

如图，尝试各种方法也没调上来，悬停显示的tooltip一直在表头下方，想询问一下非常感谢

Answer 1

参考通义千问和郭老师的小迷弟雅思莫了-编写提供，主要是为了帮助您快速解决问题，如下回答，您可以参考下，如有问题，评论区留言。

在使用 Element UI 的 el-select 组件时，开启 collapse-tags-tooltip 功能后，当标签过多并折叠显示时，悬停时的 tooltip 有时可能会被上方元素遮挡。为了解决这个问题，你可以尝试以下几种方法：

1. 检查定位与层级：

   • 确保 el-select 组件或其包含的 tooltip 容器（通常是 .el-select__tags 或 .el-tooltip__popper 类名相关的元素）没有受到外部样式的影响，特别是 overflow: hidden 或者固定定位造成的遮挡。
   • 检查并调整组件父级元素的 z-index 属性，确保 tooltip 的层级高于其他可能遮挡它的元素。

2. 自定义 CSS：

   • 可以通过添加自定义 CSS 来调整 tooltip 的位置，例如增加一个上偏移量（如 top 值），或者将其定位改为绝对定位，并相对于合适的祖先元素进行定位。

3. 修改 Tooltip 容器属性：

   • 尝试通过 JavaScript 在 tooltip 显示时动态调整其容器的位置或样式，但 Element UI 中可能不直接支持这样的操作，你可能需要深入到组件内部去调整。

4. 使用 Popper.js 引导定位：

   • 如果 Element UI 的 select 组件内部的 tooltip 是基于 Popper.js 实现的，那么它应该能够自动处理遮挡问题。如果发现没有正常工作，可能是由于某些特殊情况导致 Popper.js 未能正确计算出最佳位置。

5. 避免表头下方空间不足：

   • 调整页面布局，确保 el-select 下方有足够的空间来展示 tooltip。

6. 查看 Element UI 文档更新：

   • 查阅最新的 Element UI 文档，看是否有针对此问题的官方解决方案或配置选项。

请注意，由于我无法看到实际的页面布局和代码，上述建议是根据常见问题和一般解决思路提出的。具体实现时请结合项目实际情况调整。