How to change the background color of MUI tooltips?
P粉147045274
P粉147045274 2023-09-04 11:56:50
0
1
853
<p>I would like a "?" user can hover over the icon and get specifications on what data should be entered in the text field. MUI's default hover is gray with white text, but I want mine to be white with gray text and with a larger font. I found that using works fine for font size and color, but when I change the background color, the hover text field has a gray border around it. This is the hover.js component: </p> <pre class="brush:php;toolbar:false;">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> ) }</pre> <p>However, this leaves a black border around the hover text box. Any idea how to solve this problem? What does it look like</p>
P粉147045274
P粉147045274

reply all(1)
P粉670107661

You can use sx to solve this problem.

Now I found that using it directly on the Tooltip doesn't work, but you can use slotProps to pass it to the actual tooltip element 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>
);
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template