React项目中如何在禁用的MUI ToggleButton上显示Tooltip？

禁用的DOM元素默认不会响应鼠标事件（如hover），Tooltip无法感知到用户交互，因此禁用状态下不会显示。以下是两种可行的解决方法：

方案1：用非禁用容器包裹ToggleButton（官方推荐） #

将ToggleButton放在非禁用的<span>容器中，再把Tooltip套在容器外层。容器能正常触发鼠标事件，Tooltip就能正常显示。

代码示例：

<Tooltip title="Data Not Available">
  <span>
    <ToggleButton
      value={item?.key}
      aria-label="left aligned"
      key={item?.key}
      disabled={true}
    >
      {item?.value}
    </ToggleButton>
  </span>
</Tooltip>

方案2：通过CSS调整鼠标事件传递 #

给禁用的ToggleButton设置pointer-events: none，同时让Tooltip捕获鼠标事件，确保hover操作能被检测到：

代码示例：

<Tooltip
  title="Data Not Available"
  sx={{ pointerEvents: 'auto' }}
>
  <ToggleButton
    value={item?.key}
    aria-label="left aligned"
    key={item?.key}
    disabled={true}
    sx={{ pointerEvents: 'none' }}
  >
    {item?.value}
  </ToggleButton>
</Tooltip>

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