How to adjust MUI Tooltip font size?

user_13151564 0
Viewed 18486

I implemented a tooltip with MUI but the fontSize is too small. And I can't change it with a .scss.

import React from "react";
import "./InfoTooltip.scss";
import InfoIcon from '@material-ui/icons/Info';
import Tooltip from '@material-ui/core/Tooltip';

const InfoTooltip: React.FC<{ children?: any }> = ({ children }) => {
  const [label, ...rest] = children;
  return (
    <div className="info-tooltip-container">
      <div className="label-container">
        <Tooltip title={label}>
          <InfoIcon style={{ fontSize: '24px' }} />
        </Tooltip>
      </div>
      {rest}
    </div>
  );
};

export default InfoTooltip;

.info-tooltip-container {
  .label-container {
    font-size: 18px;
  }
  label {
    font-size: 18px;
  }
}

https://mui.com/components/tooltips/#main-content

material-ui reactjs tooltip css javascript
4 Answers

You can add a customized component directly to props title.

If needed, you can add whatever inline-styles to the component you just added.

Include the font-size

<Tooltip title={<h1 style={{ color: "lightblue" }}>title</h1>}>
  <InfoIcon />
</Tooltip>

enter image description here

Refer: MUI tooltip document: customized-tooltips

user_118722460

You can do that at global level or at component level.

Global level

This way all the Tooltips in the application will get the style.

First you need to create a theme.js file:

'use strict';

import { createMuiTheme } from '@material-ui/core/styles';

const theme = createMuiTheme({
    overrides: {
        MuiTooltip: {
            tooltip: {
                fontSize: "1em",
            },
        },
    },
});

export default theme;

Then import it in your main application component, so it will be applied to all the application components:

'use strict';

import React from "react";
import { ThemeProvider } from '@material-ui/styles';
import CssBaseline from '@material-ui/core/CssBaseline';
import theme from 'theme.js';

export default class App extends React.Component {

    render() {
        return (
            <ThemeProvider theme={theme}>
                <CssBaseline />
                    {/* Your app content */}
            </ThemeProvider>
        );
    }
}

Component level

With this approach you can define a different style for each component.

'use strict';

import React from "react";
import { makeStyles } from '@material-ui/core/styles';
import Tooltip from "@material-ui/core/Tooltip";

const useStyles = makeStyles({
    tooltip: {
      fontSize: "1em",
    },
});

export default class MyComponent extends React.Component {

    const classes = useStyles();

    render() {
        return (
            <Tooltip classes={{tooltip: classes.tooltip}} />
        );
    }

}
user_6365610

You can also use Typography and set the fontSize directly. Some components like Box or Typography inherit system props which allow you to change the styling using the top-level props:

<Tooltip title={<Typography fontSize={30}>title</Typography>}>
  <IconButton>
    <DeleteIcon />
  </IconButton>
</Tooltip>

Live Demo

Codesandbox Demo

user_94494260

Using MUI v5

This will change the font size for all tooltips within <ThemeProvider>

import React from "react";
import { createTheme, CssBaseline, ThemeProvider } from '@mui/material';

const theme = createTheme({
    components: {
        MuiTooltip: {
            styleOverrides: {
                tooltip: {
                    fontSize: '1em'
                }
            }
        }
    }
});

export default function App() {
    return <ThemeProvider theme={theme}>
        {/* Your app content */}
        <CssBaseline />
    </ThemeProvider>;
}
user_5656330
Related