I am attempting to incorporate a tooltip around an interactive MUI switch button that changes dynamically with user input. Here is the code snippet I have implemented so far:
import * as React from 'react';
import { styled } from '@mui/material/styles';
import FormGroup from '@mui/material/FormGroup';
import FormControlLabel from '@mui/material/FormControlLabel';
import Switch from '@mui/material/Switch';
import Stack from '@mui/material/Stack';
import Typography from '@mui/material/Typography';
const MaterialUISwitch = styled(Switch)(({ theme }) => ({
// Switch styling
}));
export default function DrawViewSwitch() {
return (
<FormGroup>
<FormControlLabel
control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
/>
</FormGroup>
);
};
I have attempted to enclose the FormControlLabel within a Tooltip component without success. Is there a way to handle events within the Tooltip itself? If so, how can this functionality be leveraged?