如何为MUI Badge组件添加仅悬浮徽章本身触发的Tooltip提示？

可以通过将提示的触发范围限定在徽章本身的DOM节点实现需求，共有两种常用实现方式：

方案1：将Tooltip嵌套在badgeContent中（推荐，适配MUI设计规范） #

核心逻辑是把Tooltip的触发源绑定到徽章内容本身，而非整个Badge容器，子元素悬浮时不会触发提示。需要注意Tooltip的子元素必须是可接收ref的DOM节点，纯数字/文本需要额外包裹一层<span>：

import Tooltip from '@mui/material/Tooltip';
import Badge from '@mui/material/Badge';

<Badge
  badgeContent={
    <Tooltip title="Click to view more info">
      <span>{getTotalVulnerabilitiesCount()}</span>
    </Tooltip>
  }
  showZero={false}
>
  {children}
</Badge>

该方案支持自定义提示的悬浮延迟、位置、样式等Tooltip原生属性，交互体验和MUI设计体系统一。

方案2：通过slotProps给徽章节点单独加原生title（轻量方案） #

如果不需要自定义提示样式，可直接给Badge的徽章专属插槽添加原生title属性，无需引入额外组件：

<Badge
  badgeContent={getTotalVulnerabilitiesCount()}
  showZero={false}
  // MUI v5 版本写法
  slotProps={{
    badge: {
      title: 'Click to view more info'
    }
  }}
  // 若使用MUI v4 请替换为componentsProps
  // componentsProps={{
  //   badge: {
  //     title: 'Click to view more info'
  //   }
  // }}
>
  {children}
</Badge>

该方案更轻量，无额外组件渲染开销，提示样式为浏览器原生的title提示样式。

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