如何在设置overflow属性的div内显示完整不被截断的tooltip

问题原因 #

overflow-y: auto会对容器内部的所有内容进行边界裁剪，无论子元素的z-index设置为多大，只要处于该容器的BFC（块级格式化上下文）内，超出容器边界的部分都会被隐藏，这是tooltip被遮挡的核心原因。

解决方案 #

方案1：修改tooltip挂载节点（最推荐）

不要将tooltip的DOM节点放在设置了overflow-y: auto的div内部，直接挂载到body或外层无overflow裁剪规则的根节点下即可突破容器限制。
主流组件库都提供了对应的配置项：

• Element UI 2.x：给tooltip组件设置popper-append-to-body="true"
• Element Plus：给tooltip组件设置teleported="true"
• Ant Design：给tooltip组件设置getPopupContainer={() => document.body}
• 原生手写tooltip：直接将tooltip的DOM节点插入到body下，通过JS计算触发元素的页面坐标来动态定位tooltip位置即可。

方案2：调整容器结构

如果无法修改tooltip的挂载逻辑，可以调整外层布局：

1. 给当前设置了overflow-y: auto的div外层新增一个无overflow限制的父容器
2. 移除滚动div的position: relative属性，将position: relative设置给新增的外层父容器
3. 将tooltip的DOM节点放在外层父容器下，定位逻辑基于外层父容器实现，即可突破滚动容器的裁剪限制。

方案3：使用fixed定位（特殊场景适用）

如果前两种方案都无法落地，可以将tooltip的定位规则改为fixed：

.tooltip {
  position: fixed;
  z-index: 9999;
  /* 其余样式保持不变 */
}

fixed定位是相对于浏览器视口生效的，完全不受父容器overflow属性的影响，只需要通过JS计算触发元素的视口坐标，动态设置tooltip的top、left值即可。该方案的缺点是页面滚动时需要实时监听重新计算位置，否则tooltip不会跟着触发元素移动。

内容的提问来源于stack exchange，提问作者Taima