I want to show a tooltip around a MUI switch button. The tooltip should change with the switched button. This is my code 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 }) => ({
  width: 62,
  height: 34,
  padding: 7,
  '& .MuiSwitch-switchBase': {
    margin: 1,
    padding: 0,
    transform: 'translateX(6px)',
    '&.Mui-checked': {
      color: '#fff',
      transform: 'translateX(22px)',
      '& .MuiSwitch-thumb:before': {
        backgroundImage: `url("data:image/svg xml,<?xml version='1.0' encoding='iso-8859-1'?>
");`,
      },
      '&   .MuiSwitch-track': {
        opacity: 1,
        backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
      },
    },
  },
  '& .MuiSwitch-thumb': {
    backgroundColor: theme.palette.mode === 'dark' ? '#60A7D4' : '#60A7D4',
    width: 32,
    height: 32,
    '&:before': {
      content: "''",
      position: 'absolute',
      width: '100%',
      height: '100%',
      left: 0,
      top: 0,
      backgroundRepeat: 'no-repeat',
      backgroundPosition: 'center',
      backgroundImage: `url("data:image/svg xml,<?xml version='1.0' encoding='iso-8859-1'?>
");`,
    },
  },
  '& .MuiSwitch-track': {
    opacity: 1,
    backgroundColor: theme.palette.mode === 'dark' ? '#8796A5' : '#aab4be',
    borderRadius: 20 / 2,
  },
}));

export default function DrawViewSwitch() {
  return (
    <FormGroup>
      <FormControlLabel
        control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
      />
    </FormGroup>
  );
};

I tried to put the Tooltip around the FormControlLabel but it does not work. Is there something like an eventhandler for the Tooltip instance? If yes, how could it be utilized?

CodePudding user response：

change the DrawViewSwitch like below

export default function DrawViewSwitch() {
  const [check, setCheck] = React.useState(false);
  const handleCheck = () => {
    setCheck(!check);
  };
  return (
    <>
      <FormGroup>
        <Tooltip title={check ? "eye" : "pencil"}>
          <FormControlLabel
            onChange={handleCheck}
            control={<MaterialUISwitch sx={{ m: 1 }} defaultChecked />}
          />
        </Tooltip>
      </FormGroup>
    </>
  );
}