Material UI's Tooltip - Customization Style [duplicate]

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