How to change the background color of a MUI tooltip?

Question

I want to have a "?" icon that users can hover and get specifications on what data they should input into the text field. MUI's default hover is grey with white words, but I'd like mine to be white with grey words, and the font to be bigger. I found that using works well for font-size and color, but when I change background color, there is a grey border around the hover textfield. This is the hover.js component:

export default function HoverTip(prop) {
    const { tip } = prop

    return (
    <Tooltip 
        title={
            <Typography 
            fontSize={15} 
            backgroundColor={'#ffff'} 
            color={'#514E6A'}>
                {tip}
            </Typography>}     
        arrow 
        placement="right"
        sx={{fontSize: '30'}}
        
         >
        <IconButton >
        <HelpOutlineIcon />
        </IconButton>
    </Tooltip>
    )

}

However this leaves a black border around the hover textbox. Any idea how to fix this? what it looks like

Answer 1

You can solve this by using the sx.

Now I found that using it on the Tooltip directly does not work but you can pass it to the actual tooltip element using the slotProps property.

return (
  <Tooltip
    title={<Typography fontSize={15}>{tip}</Typography>}
    arrow
    placement="right"
    sx={{ fontSize: "30" }}
    slotProps={{
      tooltip: {
        sx: {
          color: "#514E6A",
          backgroundColor: "#ffff",
        },
      },
    }}
  >
    <IconButton>
      <HelpOutlineIcon />
    </IconButton>
  </Tooltip>
);