Search code examples
reactjsmaterial-uitooltip

Add a tooltip to MUI Badge content?

I want to add a tooltip to my MUI Badge component.

I tried wrapping the badge with a ToolTip component from MUI but tooltip text also displays when the children are hovered, I'd like it to only appear when the Badge itself is hovered.

I have also tried using the primitive title prop on the badge component but this has the same issue.

Does anyone know of a better way to add a tooltip to a Badge component?

my usage:

<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>
Solution

  • You're very close, badgeContent prop also accepts a ReactNode so you can put the Badge content inside a Tooltip without affecting the other component:

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

    Codesandbox Demo