javascript - How to change the background color of a MUI tooltip? - Stack Overflow

admin管理员组

文章数量:1415119

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 ponent:

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

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 ponent:

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

• javascript
• reactjs
• material-ui
• tooltip

Share Improve this question Follow edited May 25, 2023 at 19:19 Ruo asked May 25, 2023 at 19:14 RuoRuo 12711 silver badge1313 bronze badges

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 5

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

<Tooltip
  PopperProps={{ sx: { '.MuiTooltip-tooltip': { bgcolor: 'green' } } }} 
  title="green"
>
  <SomeIcon />
</Tooltip>

本文标签： javascriptHow to change the background color of a MUI tooltipStack Overflow