Chakra UI中Tooltip显示在屏幕左上角而非元素上方如何解决？

问题原因 #

• Tooltip 组件需要通过 ref 读取绑定的触发元素的坐标信息，才能计算浮层的正确展示位置。直接将 react-icons 导出的 SVG 图标组件作为 Tooltip 子元素时，这类第三方图标组件默认不会转发 ref，Tooltip 无法获取触发元素的真实位置，就会 fallback 到页面左上角 (0,0) 坐标渲染。
• Chakra UI 的 Modal 组件默认会创建独立的堆叠上下文，而 Tooltip 默认会把浮层挂载到 document.body 根节点，跨堆叠上下文渲染时容易受容器 transform、z-index 属性影响，出现定位偏移。

修复方案 #

方案1：给触发元素包裹可转发ref的容器 #

这是最通用的修复方式，在图标外层包一层原生 DOM 标签或者 Chakra 内置的布局组件（比如Box、span），让 Tooltip 可以正常绑定 ref 获取位置：

const CreatedByModal = () => {
  return (
    <Stack
      spacing={"4"}
      margin={"0px !important"}
      alignItems={"center"}
      px={{ base: "2", lg: "6" }}
      pt={"2"}
    >
      <HStack justifyContent={"space-between"}>
        <Tooltip
          bg={"white"}
          textAlign={"center"}
          color={"black"}
          placement="top"
          label="Tip"
          aria-label="A tooltip"
        >
          <span>
            <AiFillWallet size={"1.2rem"} color={"#b1bad3"} />
          </span>
        </Tooltip>
        <Tooltip
          bg={"white"}
          textAlign={"center"}
          color={"black"}
          placement="top"
          label="Ignore"
          aria-label="A tooltip"
        >
          <span>
            <AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
          </span>
        </Tooltip>
      </HStack>
    </Stack>
  );
};

方案2：关闭Tooltip的Portal挂载 #

如果包裹容器后仍存在定位偏移，可以给 Tooltip 添加hasPortal={false}属性，让浮层直接渲染在触发元素同级位置，不单独挂载到 body 根节点，从根源避免跨堆叠上下文的定位问题：

<Tooltip
  bg={"white"}
  textAlign={"center"}
  color={"black"}
  placement="top"
  label="Ignore"
  aria-label="A tooltip"
  hasPortal={false}
>
  <span>
    <AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
  </span>
</Tooltip>

方案3：指定Tooltip的Portal挂载容器 #

如果需要保留Portal能力避免z-index遮挡问题，可以手动给Tooltip指定挂载容器为当前Modal的DOM节点，确保浮层和触发元素处于同一个堆叠上下文内：

// 先给Modal创建ref
const modalRef = useRef(null);

// 绑定ref到Modal组件
<Modal ref={modalRef} {/* 其他Modal属性 */}>
  {/* Modal内容 */}
  <Tooltip
    {/* 其他Tooltip属性 */}
    portalProps={{ containerRef: modalRef }}
  >
    <span>
      <AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
    </span>
  </Tooltip>
</Modal>

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