0
350
ViewsIs it possible to render a tooltip on a disabled MUI Button within a ButtonGroup without breaking the layout?
I'm trying to create a MUI 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>
2 answers
Answer question0
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>
);
}
0
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>