antd Tooltip padding重叠导致子按钮无法点击如何调整样式

问题表现 #

• 二次封装antd Tooltip组件、覆盖部分默认样式后，组件重叠的padding区域遮挡内部子按钮，按钮无法响应点击事件
• 直接给元素设置z-index调整层级无效果

根本原因 #

1. antd默认给Tooltip的外层弹层、带padding的内容包裹层设置了pointer-events: none，保证透明padding区域不会拦截点击事件；自定义样式时如果覆盖了该属性，透明的padding层就会成为鼠标事件的响应目标，挡住下层的按钮。
2. z-index属性仅对position值为relative/absolute/fixed/sticky的元素生效，只加z-index不修改定位属性，层级调整不会生效。

修复方案 #

方案1：恢复事件穿透属性（推荐） #

给遮挡点击的外层Tooltip元素加事件穿透，仅让实际承载内容的内层容器响应鼠标事件，从根源解决透明层遮挡问题，不需要调整层级：

/* 外层带padding的容器设置事件穿透，不拦截点击 */
.ant-tooltip,
.ant-tooltip-content {
  pointer-events: none !important; /* 自定义样式优先级高时可加!important覆盖 */
}
/* 实际内容区域恢复点击响应 */
.ant-tooltip-inner {
  pointer-events: auto;
}

如果按钮是放在Tooltip的触发元素（children）上而非弹层内容里，只需要给弹层本身加pointer-events: none即可，避免弹层出现瞬间遮挡触发元素。

方案2：修正z-index生效条件 #

如果需要通过层级调整解决遮挡，给需要置顶的按钮加上非static定位，z-index即可正常生效：

/* 给内部按钮加相对定位，不会影响原有布局 */
.tooltip-wrap .action-button {
  position: relative;
  z-index: 1;
}

注意：z-index值不要设置过高，避免后续弹出的下拉菜单、Modal等组件被按钮遮挡。

避坑提醒 #

• 覆盖antd组件默认样式前，建议先通过浏览器开发者工具查看原样式的属性作用，不要随意修改pointer-events、position、overflow这类会影响交互和布局的属性。
• 如果通过getPopupContainer修改了Tooltip的挂载节点，需要检查父容器是否设置了transform、overflow: hidden属性，这类属性会生成新的层叠上下文，导致z-index设置失效。

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