Chakra UI：为什么工具提示显示在屏幕的左上角而不是显示在元素的顶部？

Question

createdByModal 基本上是一个脉轮模式，我在其中使用工具提示。每当我将鼠标悬停在图标上时，工具提示都会显示在屏幕顶部而不是图标顶部。在照片中，您可以看到忽略元素正在显示在左上角

---

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"
        >
          <AiFillWallet size={"1.2rem"} color={"#b1bad3"} />
        </Tooltip>
        <Tooltip
          bg={"white"}
          textAlign={"center"}
          color={"black"}
          placement="top"
          label="Ignore"
          aria-label="A tooltip"
        >
          <AiFillEyeInvisible size={"1.2rem"} color={"#b1bad3"} />
        </Tooltip>
      </HStack>
    </Stack>
  );
};

Answer 1

您是否使用forwardRef包装了需要工具提示的组件？

https://chakra-ui.com/docs/components/tooltip#usage

或者将您的图标组件包装在一个跨度中

https://chakra-ui.com/docs/components/tooltip#with-an-icon