How to override a disabled Tab in Material UI, REACT to use a Tooltip for FontAwesomeIcon in icon pr-CodePudding

I'm following along with the MUI docs on how to override disabled in a child component. The problem I'm having is that I have a FontAwesomeIcon as my icon for my Tab. I want to display a tooltip with on hover, but clearly I'm doing something wrong here.

The code looks something like this:

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

The tooltip isn't showing up on hover for me because it's disabled by the tab, but putting a span in there doesn't seem to fix anything. I also tried a hacky version of this solution, but couldn't get it to work. Any help would be appreciate it.

CodePudding user response：

By default, a disabled tab will not trigger user interaction. This can be disabled using styling on the Tab itself:

export default function MuiHoverTab() {
  return (
    <>
      <Tabs>
        <Tab
          disabled
          icon={
            <Tooltip title="I'm a tooltip">
              <span>Disabled but broken</span>
            </Tooltip>
          }
        />
        <Tab
          style={{ pointerEvents: "auto" }}
          disabled
          icon={
            <Tooltip title="I'm a tooltip">
              <span>Fixed using styling</span>
            </Tooltip>
          }
        />
      </Tabs>
    </>
  );
}

Here's a sandbox to see it in action: https://codesandbox.io/s/mui-hover-tab-tooltip-52p3dt?file=/src/App.js