How to style Material-UI's tooltip?

The other popular answer (by André Junges) on this question is for the 0.x versions of Material-UI. Below I've copied in my answer from Material UI's Tooltip - Customization Style which addresses this for v3 and v4. Further down, I have added a version of the example using v5.

Below are examples of how to override all tooltips via the theme, or to just customize a single tooltip using withStyles (two different examples). The second approach could also be used to create a custom tooltip component that you could reuse without forcing it to be used globally.

import React from "react";import ReactDOM from "react-dom";import {  createMuiTheme,  MuiThemeProvider,  withStyles} from "@material-ui/core/styles";import Tooltip from "@material-ui/core/Tooltip";const defaultTheme = createMuiTheme();const theme = createMuiTheme({  overrides: {    MuiTooltip: {      tooltip: {        fontSize: "2em",        color: "yellow",        backgroundColor: "red"      }    }  }});const BlueOnGreenTooltip = withStyles({  tooltip: {    color: "lightblue",    backgroundColor: "green"  }})(Tooltip);const TextOnlyTooltip = withStyles({  tooltip: {    color: "black",    backgroundColor: "transparent"  }})(Tooltip);function App(props) {  return (    <MuiThemeProvider theme={defaultTheme}>      <div className="App">        <MuiThemeProvider theme={theme}>          <Tooltip title="This tooltip is customized via overrides in the theme">            <div style={{ marginBottom: "20px" }}>              Hover to see tooltip customized via theme            </div>          </Tooltip>        </MuiThemeProvider>        <BlueOnGreenTooltip title="This tooltip is customized via withStyles">          <div style={{ marginBottom: "20px" }}>            Hover to see blue-on-green tooltip customized via withStyles          </div>        </BlueOnGreenTooltip>        <TextOnlyTooltip title="This tooltip is customized via withStyles">          <div>Hover to see text-only tooltip customized via withStyles</div>        </TextOnlyTooltip>      </div>    </MuiThemeProvider>  );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);

Here is documentation on tooltip CSS classes available to control different aspects of tooltip behavior: https://material-ui.com/api/tooltip/#css

Here is documentation on overriding these classes in the theme: https://material-ui.com/customization/components/#global-theme-override

Here is a similar example, but updated to work with v5 of Material-UI:

import React from "react";import ReactDOM from "react-dom";import { createTheme, ThemeProvider, styled } from "@material-ui/core/styles";import Tooltip, { tooltipClasses } from "@material-ui/core/Tooltip";const defaultTheme = createTheme();const theme = createTheme({  components: {    MuiTooltip: {      styleOverrides: {        tooltip: {          fontSize: "2em",          color: "yellow",          backgroundColor: "red"        }      }    }  }});const BlueOnGreenTooltip = styled(({ className, ...props }) => (  <Tooltip {...props} classes={{ popper: className }} />))(`  & .${tooltipClasses.tooltip} {    color: lightblue;    background-color: green;    font-size: 1.5em;  }`);const TextOnlyTooltip = styled(({ className, ...props }) => (  <Tooltip {...props} classes={{ popper: className }} />))(`  & .${tooltipClasses.tooltip} {    color: black;    background-color: transparent;  }`);function App(props) {  return (    <ThemeProvider theme={defaultTheme}>      <div className="App">        <ThemeProvider theme={theme}>          <Tooltip title="This tooltip is customized via overrides in the theme">            <div style={{ marginBottom: "20px" }}>              Hover to see tooltip customized via theme            </div>          </Tooltip>        </ThemeProvider>        <BlueOnGreenTooltip title="This tooltip is customized via styled">          <div style={{ marginBottom: "20px" }}>            Hover to see blue-on-green tooltip customized via styled          </div>        </BlueOnGreenTooltip>        <TextOnlyTooltip title="This tooltip is customized via styled">          <div>Hover to see text-only tooltip customized via styled</div>        </TextOnlyTooltip>      </div>    </ThemeProvider>  );}const rootElement = document.getElementById("root");ReactDOM.render(<App />, rootElement);

Documentation on changes to the theme structure between v4 and v5: https://next.material-ui.com/guides/migration-v4/#theme

Tooltip customization examples in the Material-UI documentation: https://next.material-ui.com/components/tooltips/#customized-tooltips

This answer is out of date. This answer was written in 2016 for the 0.x versions of Material-UI. Please see this answer for an approach that works with versions 3 and 4.

well, you can change the text color and the element background customizing the mui theme.

color - is the text color

rippleBackgroundColor - is the tooltip bbackground

Example: Using IconButton - but you could you the Tooltip directly..

import React from 'react';import IconButton from 'material-ui/IconButton';import MuiThemeProvider from 'material-ui/lib/styles/MuiThemeProvider';import getMuiTheme from 'material-ui/lib/styles/getMuiTheme';const muiTheme = getMuiTheme({  tooltip: {    color: '#f1f1f1',    rippleBackgroundColor: 'blue'  },});const Example = () => (  <div>    <MuiThemeProvider muiTheme={muiTheme}>        <IconButton iconClassName="muidocs-icon-custom-github" tooltip="test" />    </MuiThemeProvider>  </div>);

You can also pass a style object for the Tooltip (in IconButton it's tooltipStyles) - but these styles will only be applied for the root element.

It's not possible yet to change the label style to make it wrap in multiple lines.

I ran into this issue as well, and want for anyone seeking to simply change the color of their tooltip to see this solution that worked for me:

import React from 'react';import { makeStyles } from '@material-ui/core/styles';import Tooltip from '@material-ui/core/Tooltip';import Button from '@material-ui/core/Button';import DeleteIcon from '@material-ui/icons/Delete';const useStyles = makeStyles(theme => ({  customTooltip: {    // I used the rgba color for the standard "secondary" color    backgroundColor: 'rgba(220, 0, 78, 0.8)',  },  customArrow: {    color: 'rgba(220, 0, 78, 0.8)',  },});export default TooltipExample = () => {  const classes = useStyles();  return (    <>      <Tooltip        classes={{          tooltip: classes.customTooltip,          arrow: classes.customArrow        }}        title="Delete"        arrow      >        <Button color="secondary"><DeleteIcon /></Button>      </Tooltip>    </>  );};