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


enter image description here

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>
  );
};

推荐答案

您是否已将希望工具提示为forwardRef的组件包装起来?

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

或将图标组件包装在跨度中

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

Javascript相关问答推荐

如何使用CSS和JavaScript创建粘性、凝聚力的形状到形状(容器)变形?

我不明白这个react 组件有什么问题

Mongodb拥有5亿个文档,我想根据JavaScript驱动程序中的两个字段使用regEx进行搜索,而不是模式

如何在加载的元数据上使用juserc和await中获得同步负载?

如何在NightWatch.js测试中允许浏览器权限?

容器如何更改默认插槽中子项的显示?

在贝塞尔曲线的直线上找不到交叉点:(使用@Pomax的bezier.js)

Chart.js V4切换图表中的每个条,同时每个条下有不同的标签.怎么做?

docx.js:如何在客户端使用文档修补程序

如何将Openjphjs与next.js一起使用?

如何从HTML对话框中检索单选项组的值?

是什么导致了这种奇怪的水平间距错误(?)当通过JavaScript将列表项元素追加到无序列表时,是否在按钮之间?

删除加载页面时不存在的元素(JavaScript)

expo 联系人:如果联系人的状态被拒绝,则请求访问联系人的权限

如何使用抽屉屏幕及其子屏幕/组件的上下文?

如何在下一个js中更改每个标记APEXCHARTS图表的 colored颜色

在Puppeteer中使用promise进行日志(log)记录时出现TargetCloseError

脚本语法错误只是一个字符串,而不是一个对象?

如何在加载页面时使锚定标记成为焦点

在传单的图像覆盖中重新着色特定 colored颜色 的所有像素