reactjs - How to style Material-UI's tooltip?

Question

How can I style Material-UI's tooltip text? The default tooltip on hover comes out black with no text-wrap. Is it possible to change the background, color etc? Is this option even available?

question from:https://stackoverflow.com/questions/36759985/how-to-style-material-uis-tooltip

Answer 1

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