Is it possible to render a tooltip on a disabled Material UI Button within a ButtonGroup without breaking the layout?

Question

I'm trying to create a Material UI ButtonGroup with disabled buttons and tooltip.

The following code block shows the buttons correctly, but as described here (https://material-ui.com/components/tooltips/#disabled-elements) disabled elements cannot be provided with a tooltip.

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <Button disabled>{"Button B"}</Button>
    </Tooltip>
</ButtonGroup>

But if I add a span around the disabled button the group layout will be destroyed.

<ButtonGroup>
    <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
    </Tooltip>
    <Tooltip title={"This is button B"}>
        <span>
            <Button disabled>{"Button B"}</Button>
        </span>
    </Tooltip>
</ButtonGroup>

Answer 1

Yes, it is possible. you would need to wrap your button in span tag example

<Tooltip title={YOUR_MESSAGE_HERE}>
   <span>
     <Button disabled>my button is disabled</Button>
   </span>
</Tooltip>

Answer 2

There are two aspects about a disabled button that get in the way of the tooltip behavior:

1. As mentioned in the docs you referenced, a disabled <button> element (independent of Material-UI) does not fire events in a manner to support proper behavior of the Tooltip.
2. Material-UI specifically disables pointer-events in Material-UI's ButtonBase component (leveraged by Button) when it is disabled.

The second problem can be addressed by overriding Material-UI's disabled styling to allow pointer events:

import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";

const Button = withStyles({
  root: {
    "&.Mui-disabled": {
      pointerEvents: "auto"
    }
  }
})(MuiButton);

The first problem can be addressed by using Button's component prop to use a <div> element instead of a <button> element. Disabled button elements do not receive click events, so in order to have the Button still behave in a disabled fashion, this code removes the onClick prop when it is disabled.

  const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
    const adjustedButtonProps = {
      disabled: disabled,
      component: disabled ? "div" : undefined,
      onClick: disabled ? undefined : onClick
    };
    return (
      <Tooltip title={tooltipText}>
        <Button {...other} {...adjustedButtonProps} />
      </Tooltip>
    );
  };

Below is a working demonstration with Buttons B and C both disabled. Buttons A and B use the approach outlined above and Button C is a regular Material-UI Button without a Tooltip for comparison. The additional Button below them toggles the disabled state of B and C.

import React from "react";
import Tooltip from "@material-ui/core/Tooltip";
import MuiButton from "@material-ui/core/Button";
import { withStyles } from "@material-ui/core/styles";
import ButtonGroup from "@material-ui/core/ButtonGroup";

const Button = withStyles({
  root: {
    "&.Mui-disabled": {
      pointerEvents: "auto"
    }
  }
})(MuiButton);

const ButtonWithTooltip = ({ tooltipText, disabled, onClick, ...other }) => {
  const adjustedButtonProps = {
    disabled: disabled,
    component: disabled ? "div" : undefined,
    onClick: disabled ? undefined : onClick
  };
  return (
    <Tooltip title={tooltipText}>
      <Button {...other} {...adjustedButtonProps} />
    </Tooltip>
  );
};

export default function App() {
  const [bAndCDisabled, setBAndCDisabled] = React.useState(true);

  return (
    <>
      <ButtonGroup>
        <ButtonWithTooltip
          tooltipText="This is Button A"
          onClick={() => console.log("A")}
        >
          {"Button A"}
        </ButtonWithTooltip>
        <ButtonWithTooltip
          tooltipText="This is Button B"
          onClick={() => console.log("B")}
          disabled={bAndCDisabled}
        >
          {"Button B"}
        </ButtonWithTooltip>
        <MuiButton onClick={() => console.log("C")} disabled={bAndCDisabled}>
          {"Button C"}
        </MuiButton>
      </ButtonGroup>
      <br />
      <br />
      <MuiButton
        variant="contained"
        onClick={() => setBAndCDisabled(!bAndCDisabled)}
      >
        Toggle disabled for B and C
      </MuiButton>
    </>
  );
}

Answer 3

Adding div/span around the buttons can mess with the button styling sometimes. So we should ideally use <> or <React.Fragment>. But the tool tips doesn't work with react fragments so we can use the <span> like mentioned in the question. But in that case, since ButtonGroup is used here and that works by cloning the child button elements and passing props for the styling, we'll have to send the style props to the "Button B" in this case.

import React from "react";
import "./styles.css";
import { Tooltip, Button } from "@material-ui/core";
import ButtonGroup from "@material-ui/core/ButtonGroup";

export default function App() {
  const ButtonDemo = (props) => {
    return (
      <Tooltip title={"This is button B"}>
        <span>
          <Button {...props} disabled>
            {"Button B"}
          </Button>
        </span>
      </Tooltip>
    );
  };

  return (
    <ButtonGroup>
      <Tooltip title={"This is button A"}>
        <Button>{"Button A"}</Button>
      </Tooltip>
      <ButtonDemo />
    </ButtonGroup>
  );
}

    

Answer 4

For MUI 5.11 and above you'll need to wrap the button in span tags instead.

<Tooltip title="tooltip text">
  <span>
    <Button disabled>Disabled Button</Button>
  </span>
</Tooltip>

Answer 5

Use this for mui > v5

<Tooltip title={YOUR_MESSAGE_HERE}>
  <Button disabled>
    <span>
     my button is disabled
    </span>
  </Button>
</Tooltip>