Mui tooltip font size

by

mui tooltip font size

To customize the font size of a MUI (Material-UI) tooltip, you can use CSS styles. The tooltip component in Material-UI provides a class named MuiTooltip-tooltip, which can be targeted using CSS selectors to modify its font size.

Here’s an example of how you can change the font size of a tooltip: 

<Tooltip title="This is a tooltip" className="custom-tooltip">
  <Button variant="contained" color="primary">
    Hover me
  </Button>
</Tooltip>

In the above code, we have added the class custom-tooltip to the Tooltip component, which we can then use to target the tooltip and modify its font size.

Now, in the CSS section or a separate CSS file, you can define the styles for the .custom-tooltip class: 

.custom-tooltip .MuiTooltip-tooltip {
  font-size: 16px; /* Specify your desired font size */
}

In the above example, we set the font-size to 16px for the tooltip text. You can adjust this value as per your requirements.

Read more interesting post

Leave a comment