Carbon React表格内Tooltip提示框被裁剪问题求助

我在CARBON React表格的表头中使用了自定义Tooltip组件，代码如下：

import { useState } from "react";
import { Popover, PopoverContent } from "@carbon/react";

type TooltipProps = {
  id: number;
  align?: string;
  className?: string;
  children?: any;
  definition: string;
};
export function TableTooltip({
  id,
  align,
  className,
  definition,
  children,
}: TooltipProps) {
  const [isOpen, setOpen] = useState(false);

  function onKeyDown(event: React.KeyboardEvent) {
    if (isOpen && event.key === "Escape") {
      console.log("escaped");
      event.stopPropagation();
      setOpen(false);
    }
  }

  return (
    <Popover
      id={"po" + id}
      align={"bottom"}
      className={className}
      dropShadow={false}
      highContrast
      onMouseLeave={() => {
        setOpen(false);
      }}
      onMouseEnter={() => {
        setOpen(true);
      }}
      open={isOpen}
    >
      <div
        className={"cds--definition-term"}
        aria-controls={`${id}`}
        aria-expanded={isOpen}
        onBlur={() => setOpen(false)}
        onKeyDown={onKeyDown}
      >
        {children}
      </div>
      <PopoverContent className={`custom-table-tooltip`} id={id + "tooltip"}>
        {definition}
      </PopoverContent>
    </Popover>
  );
}

但提示框出现了被裁剪的情况：

我尝试过将提示框挂载到<body>、设置zIndex，也参考过相关Issue页面，但都未解决问题。希望不使用其他外部库来解决该问题。

补充：有一个更贴合当前场景的Issue。

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