reactjs - 向 MUI 徽章内容添加工具提示？

Question

我想向我的 MUI Badge 组件添加工具提示。

我尝试使用 MUI 中的 ToolTip 组件包装徽章，但当子项悬停时也会显示工具提示文本，我希望它仅在 Badge 时出现其本身悬停。

我也尝试过在徽章组件上使用原始 title 属性，但这也有同样的问题。

有人知道向 Badge 组件添加工具提示的更好方法吗？

我的用法:

<Badge
      title={'Click to view more info'} // not ideal as the tooltip shows when the children are hovered too
      badgeContent={getTotalVulnerabilitiesCount()}
      showZero={false}
    >
        {children}
</Badge>

Answer 1

你已经非常接近了，badgeContent 属性还接受 ReactNode，因此你可以将 Badge 内容放入 Tooltip 不影响其他组件:

<Badge
  color="primary"
  badgeContent={
    <Tooltip title="Delete">
      <span>1</span>
    </Tooltip>
  }
>
  <MailIcon color="action" />
</Badge>