React中如何为Material UI禁用Tab的FontAwesomeIcon添加Tooltip

问题核心在于：禁用状态的Tab会被设置pointer-events: none，阻止所有鼠标事件传递到内部元素，导致Tooltip无法被触发。你需要给图标外层的容器重置鼠标事件属性，让它能接收hover事件。

修正方案一（针对原代码结构） #

直接在图标外层的span上添加样式，覆盖父元素的禁用事件限制：

<TabList>
  <Tab
    disabled
    icon={
      <Tooltip title="I'm a tooltip">
        <span style={{ pointerEvents: 'auto' }}>
          <FontAwesomeIcon icon={regular.check} />
        </span>
      </Tooltip>
    }
  />
</TabList>

原理：pointer-events: auto会解除父元素（禁用Tab）的鼠标事件锁定，让span区域能正常接收悬停事件，从而触发Tooltip。

修正方案二（包裹整个Tab） #

如果方案一无效，可尝试用Tooltip包裹整个Tab，同时给外层容器设置事件权限：

<Tooltip title="I'm a tooltip">
  <span style={{ pointerEvents: 'auto' }}>
    <Tab disabled icon={<FontAwesomeIcon icon={regular.check} />} />
  </span>
</Tooltip>

注意：包裹Tab的span必须设置pointer-events: auto，否则禁用的Tab依然会阻止事件传递。

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