React CSS如何设置hover触发的提示弹窗为不透明避免透出表格边框

出现底层表格边框透出的核心原因是伪元素生成的 tooltip 没有设置足够高的层叠优先级，被下层表格元素覆盖显示导致，按以下步骤修改即可：

• 给 tooltip 的两个伪元素都添加z-index属性，设置足够大的数值确保显示层级高于页面内其他普通元素
• 修正CSS非法属性值：你当前写的white-space: wrap不属于合法属性值，可根据需求替换为white-space: normal或者white-space: pre-wrap，避免异常布局
• 可选优化：将 tooltip 的纵向定位从margin-top: 33px改为top: calc(100% + 5px)，适配不同高度的单元格场景，定位更稳定

修改后的完整CSS代码如下：

[data-title] {
    font-size: 14px;
    position: relative;
    cursor: help;
}
  
[data-title]:hover::before {
    content: attr(data-title);
    opacity: 1;
    position: absolute;
    top: calc(100% + 5px);
    padding: 10px;
    background: #000;
    color: #fff;
    font-size: 14px;
    width: 300px;
    white-space: normal;
    z-index: 9999;
}
[data-title]:hover::after {
    content: '';
    position: absolute;
    opacity: 1;
    bottom: -12px;
    left: 8px;
    border: 8px solid transparent;  
    border-bottom: 8px solid #000;
    z-index: 9999;
}

如果修改后仍有透出问题，可检查父级单元格是否设置了transform、opacity这类会创建新层叠上下文的属性，对应调整z-index到当前层叠上下文内的最高值即可。

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