import Tooltip from "@mui/material/Tooltip";
import styled from 'styled-components/macro';
// import { styled } from '@mui/material/styles';
import tooltipClasses from "@mui/material/Tooltip/tooltipClasses";
// const StyledTooltip = styled(({ className, ...props }) => {
//     return (
//         <Tooltip {...props} classes={{ popper: className }} />
//     );
// })(({ theme }) => ({
//     [`& .${tooltipClasses.arrow}`]: {
//         color: 'var(--tooltip-bg)',
//     },
//     [`& .${tooltipClasses.tooltip}`]: {
//         backgroundColor: 'var(--tooltip-bg)',
//         color:'var(--header)',
//         fontSize: '.75rem',
//     },
// }));
const StyledTooltip = styled(({ className, ...props }) => {
    return (
        <Tooltip {...props} classes={{ popper: className }} />
    );
})`
   & .${tooltipClasses.arrow} {
      color: var(--tooltip-bg);
   }
   & .${tooltipClasses.tooltip} {
      background-color: var(--tooltip-bg);
      color:var(--header);
      font-size:.75rem;
   }
`;


const MTooltip = ({...props}) => {
    return (<StyledTooltip {...props}></StyledTooltip>);
}


export default MTooltip
