修复工具提示被粘性定位表格单元格遮挡的问题

1. 将工具提示挂载到<body>下 #

不要把工具提示放在表格单元格内部，改用JavaScript动态创建tooltip元素，直接插入到<body>标签中。这样它的定位上下文是整个文档，不受表格单元格的z-index限制。触发tooltip时计算好显示位置，关闭时再移除该元素即可。

2. 重新梳理z-index的定位上下文 #

你之前调整z-index无效，大概率是因为粘性单元格的父元素（比如<tr>或<tbody>）设置了position: relative，导致单元格的z-index仅在父级上下文内生效。可以试试以下调整：

• 给非hover状态的固定列单元格设置较低的z-index，比如z-index: 1
• 给工具提示设置高优先级z-index，比如z-index: 999
• 确保工具提示的父级（若不是body）没有设置overflow: hidden或低优先级z-index

3. 临时禁用下方单元格的交互与层级 #

当工具提示显示时，给表格添加一个类（比如.tooltip-open），然后编写对应CSS规则：

.tooltip-open .sticky-cell:not(:hover) {
  z-index: 1;
  pointer-events: none;
}
.tooltip {
  z-index: 999;
  position: absolute;
  /* 你的其他tooltip样式 */
}

这样下方的粘性单元格层级降低，同时不会干扰鼠标交互，tooltip就能正常显示。

4. 更换固定列的实现方式 #

如果粘性定位的问题难以解决，可以把第一列和右侧内容拆分为两个独立容器：左侧用一个固定宽度的div放置第一列所有行，右侧用一个设置overflow-x: auto的div放置其余列。然后监听右侧容器的垂直滚动事件，同步左侧容器的滚动位置，两个容器属于独立的定位上下文，tooltip就不会被遮挡了。

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