Antd Tooltip设置z-index不生效 子元素被内边距遮挡无法点击

遮挡交互的核心原因有两点：

• 给.ant-tooltip-content设置了20px的padding-bottom，这部分空白区域属于Tooltip弹层的响应范围，且通过getPopupContainer配置将弹层挂载到了触发节点内部，Antd默认给弹层设置的z-index高于子元素，空白区域直接覆盖在子元素上方，拦截了所有鼠标事件。
• 之前给子元素设置z-index不生效，是因为弹层和子元素的层叠上下文不在同一比较层级，弹层本身作为定位元素自带更高的层叠优先级，单独给子元素抬z-index无法突破层叠上下文的限制。

最简洁无侵入的方案是通过pointer-events属性控制事件响应范围，不需要改动现有DOM结构，也不需要调整复杂的z-index层级：

1. 给弹层容器.ant-tooltip-content设置pointer-events: none，让整个弹层容器默认不拦截任何鼠标事件，点击、hover等操作会直接穿透到下方的子元素。
2. 给真正需要展示、交互的弹层内容区.ant-tooltip-inner设置pointer-events: auto，恢复弹层内容本身的事件响应能力，不影响Tooltip内部的文字、按钮等元素交互。

对应修改后的样式代码如下（原有其余样式保持不变，只新增两行属性即可）：

const Custom = styled(Tooltip)`
  .ant-tooltip-arrow {
    display: none;
  }

  .ant-tooltip {
    left: ${(props) => props.left || 0} !important;
    top: ${(props) => props.top || "-70px"} !important;
  }

  .ant-tooltip-content {
    position: relative;
    overflow-x: hidden;
    overflow-y: visible;
    padding-bottom: 20px;
    display: inline-block;
    pointer-events: none; // 新增：容器默认不拦截鼠标事件
  }

  .ant-tooltip-inner {
    padding: 10px 15px;
    background: white;
    top: 0;
    display: inline-block;
    border-radius: 10px;
    border: 3px solid red;
    border-bottom-right-radius: 0px;
    z-index: 2;
    max-width: 200px;
    box-shadow: none;
    color: black;
    word-wrap: break-word;
    pointer-events: auto; // 新增：内容区恢复鼠标事件响应
  }

  .ant-tooltip-content:before {
    content: "";
    position: absolute;
    width: 25px;
    height: 25px;
    background: white;
    bottom: 14px;
    right: -6px;
    transform: rotate(25deg);
    border-bottom: 3px solid red;
  }

  .ant-tooltip-content:after {
    content: "";
    width: 3px;
    background: red;
    height: 50%;
    position: absolute;
    right: 0;
    bottom: 13px;
  }
`;

• 改完后Tooltip下方20px的padding空白区域会完全穿透鼠标事件，包裹的{children}子元素可以正常响应点击、hover等所有交互。
• 装饰用的:before、:after伪元素会继承父容器的pointer-events: none属性，同样不会遮挡下方元素交互，不需要额外调整。
• 该方案兼容性覆盖所有主流现代浏览器，不会引入额外的层级错乱问题。

如果不想使用pointer-events属性，也可以将.ant-tooltip-content的padding-bottom:20px改为给.ant-tooltip-inner设置margin-bottom:20px，同步调整两个伪元素的bottom偏移值即可，只是需要重新计算装饰三角的位置，维护成本更高。

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