反应中 MUI 开关的工具提示（Material-UI）

Question

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,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Layer_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 511.965 511.965' style='enable-background:new 0 0 511.965 511.965;' xml:space='preserve'%3E%3Cg%3E%3Cg%3E%3Cg%3E%3Cpath d='M489.107,33.23l-10.371-10.372c-30.479-30.476-80.067-30.479-110.546,0l-15.845,15.844L60.791,330.256 c-0.097,0.097-0.181,0.202-0.273,0.303c-0.984,1.02-1.769,2.24-2.253,3.62l-57.7,164.475c-1.273,3.627-0.353,7.664,2.365,10.382 c1.908,1.907,4.464,2.929,7.073,2.929c1.108,0,2.227-0.185,3.309-0.564l33.089-11.61c5.211-1.828,7.954-7.535,6.125-12.747 c-1.828-5.211-7.534-7.954-12.747-6.125l-13.455,4.72l45.548-129.836l84.288,84.288l-73.921,25.933 c-5.211,1.828-7.954,7.535-6.125,12.747c1.829,5.212,7.535,7.957,12.747,6.125l88.925-31.196 c1.376-0.483,2.593-1.264,3.611-2.245c0.103-0.095,0.212-0.182,0.311-0.282l291.548-291.549c0.002-0.002,0.003-0.003,0.005-0.005 l15.845-15.844C519.584,113.298,519.584,63.707,489.107,33.23z M174.638,429.96l-92.633-92.633L359.416,59.916l92.633,92.633 L174.638,429.96z M474.964,129.633l-8.773,8.773L419.875,92.09l-46.316-46.316L382.332,37c22.679-22.68,59.582-22.68,82.261,0 l10.371,10.372C497.644,70.051,497.644,106.954,474.964,129.633z'/%3E%3Cpath d='M301.537,159.959L133.297,328.2c-3.905,3.905-3.905,10.237,0,14.143c1.953,1.953,4.512,2.929,7.071,2.929 s5.119-0.976,7.071-2.929l168.24-168.241c3.906-3.905,3.906-10.237,0.001-14.143 C311.774,156.054,305.444,156.055,301.537,159.959z'/%3E%3Cpath d='M351.245,110.253l-16.251,16.25c-3.905,3.905-3.905,10.237,0,14.142c1.954,1.953,4.512,2.929,7.072,2.929 c2.559,0,5.118-0.977,7.071-2.929l16.251-16.25c3.905-3.905,3.905-10.237,0-14.142 C361.484,106.348,355.154,106.348,351.245,110.253z'/%3E%3C/g%3E%3C/g%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");`,
      },
      '& + .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,%3C%3Fxml version='1.0' encoding='iso-8859-1'%3F%3E%3C!-- Generator: Adobe Illustrator 19.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) --%3E%3Csvg version='1.1' id='Capa_1' xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' x='0px' y='0px' viewBox='0 0 59.2 59.2' style='enable-background:new 0 0 59.2 59.2;' xml:space='preserve'%3E%3Cg%3E%3Cpath d='M51.062,21.561c-5.759-5.759-13.416-8.931-21.561-8.931S13.7,15.801,7.941,21.561L0,29.501l8.138,8.138 c5.759,5.759,13.416,8.931,21.561,8.931s15.802-3.171,21.561-8.931l7.941-7.941L51.062,21.561z M49.845,36.225 c-5.381,5.381-12.536,8.345-20.146,8.345s-14.765-2.963-20.146-8.345l-6.724-6.724l6.527-6.527 c5.381-5.381,12.536-8.345,20.146-8.345s14.765,2.963,20.146,8.345l6.724,6.724L49.845,36.225z'/%3E%3Cpath d='M29.572,16.57c-7.168,0-13,5.832-13,13s5.832,13,13,13s13-5.832,13-13S36.741,16.57,29.572,16.57z M29.572,24.57 c-2.757,0-5,2.243-5,5c0,0.552-0.448,1-1,1s-1-0.448-1-1c0-3.86,3.14-7,7-7c0.552,0,1,0.448,1,1S30.125,24.57,29.572,24.57z'/%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3Cg%3E%3C/g%3E%3C/svg%3E%0A");`,
    },
  },
  '& .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?

Answer 1

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>
    </>
  );
}