Custom styled MUI IconButton does not work with tooltop - reactjs

Question

I have styled IconButton so it looks like I need the problem I have right now is that when I use ToolTip it does not appear near to my button but instead in top left corner of the page.
What I do wrong?
import { styled } from '#mui/material/styles';
import IconButton from '#mui/material/IconButton';
import { motion } from "framer-motion"
export const Colors = ['#58b864', '#91d704', '#9ad436', '#fd9828', '#ff7826', '#fc4a41', '#e01f1f', '#4065ac', '#4065ac', '#4065ac', '#4065ac'];
const Button = (props, Component) => {
const { color, greyed, children, className, icon, ...other } = props;
const StyledButton = styled(IconButton)(({ theme }) => ({
borderRadius: '18%',
height: '26px',
width: '26px',
fontSize: '15px',
backgroundColor: greyed ? '#293357' : color,
color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' , //? : theme.palette.grey[50]
'& svg': {
fontSize: '16px'
},
'&:hover': {
color: '#fff',
backgroundColor: color,
filter: icon ? 'none' : 'brightness(1.2)',
cursor: icon ? 'default' : 'pointer'
},
'&.Mui-disabled': {
backgroundColor: '#293357',
color: '#666979'
}
}));
return (
<StyledButton
{...other}
component={icon ? null : motion.div}
whileHover={{
scale: 1.1,
transition: { duration: 0.3 }
}}
whileTap={{ scale: 0.9 }}
>
{children}
</StyledButton>
)
}
export default Button;
Update:
I have found out that this work with tooltip:
const properties = ['color', 'greyed', 'icon']
const Button = styled(IconButton, { shouldForwardProp: (prop) => !properties.includes(prop)})
(({ theme, color, greyed, icon }) => ({
borderRadius: '18%',
height: '26px',
width: '26px',
fontSize: '15px',
backgroundColor: greyed ? '#293357' : color,
color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' ,
'& svg': {
fontSize: '16px'
},
'&:hover': {
color: '#fff',
backgroundColor: color,
filter: icon ? 'none' : 'brightness(1.2)',
cursor: icon ? 'default' : 'pointer'
},
'&.Mui-disabled': {
backgroundColor: '#293357',
color: '#666979'
}
}));
But then I don't understand how to globally apply animations from motion framer. Please help, what do I miss?

Answer 1

I add position:"relative" try it.
const StyledButton = styled(IconButton)(({ theme }) => ({
position:"relative",
borderRadius: '18%',
height: '26px',
width: '26px',
fontSize: '15px',
backgroundColor: greyed ? '#293357' : color,
color: greyed ? (theme.palette.mode === 'dark' ? '#63697d' : '#bebebe') : '#fff' , //? : theme.palette.grey[50]
'& svg': {
fontSize: '16px'
},
'&:hover': {
color: '#fff',
backgroundColor: color,
filter: icon ? 'none' : 'brightness(1.2)',
cursor: icon ? 'default' : 'pointer'
},
'&.Mui-disabled': {
backgroundColor: '#293357',
color: '#666979'
}
}));