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?

Answer 1

This answer is out of date. This answer was written in 2016 and Material-UI has gone through significant changes since then. Please see this answer for an approach that works with the current version (3.9.2 at this time).

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.

Answer 2

The accepted answer on this question appears to be out-of-date (it was for a very early version of Material-UI). Below I've copied in my answer from Material UI's Tooltip - Customization Style

Below are examples of how to override all tooltips via the theme, or to just customize a single tooltip using withStyles. 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 "./styles.css";

import {
  createMuiTheme,
  MuiThemeProvider,
  withStyles
} from "@material-ui/core/styles";
import Tooltip from "@material-ui/core/Tooltip";

const theme = createMuiTheme({
  overrides: {
    MuiTooltip: {
      tooltip: {
        fontSize: "2em",
        color: "yellow",
        backgroundColor: "red"
      }
    }
  }
});
const styles = {
  tooltip: {
    color: "lightblue",
    backgroundColor: "green"
  }
};

function App(props) {
  return (
    <div className="App">
      <MuiThemeProvider theme={theme}>
        <Tooltip title="This tooltip is customized via overrides in the theme">
          <div>Hover to see tooltip</div>
        </Tooltip>
      </MuiThemeProvider>
      <Tooltip
        classes={props.classes}
        title="This tooltip is customized via withStyles"
      >
        <div>Hover to see tooltip</div>
      </Tooltip>
    </div>
  );
}
const StyledApp = withStyles(styles)(App);
const rootElement = document.getElementById("root");
ReactDOM.render(<StyledApp />, rootElement);

Here is a working example:

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/themes/#css

Answer 3

If you want to change text color , font-size ... of Tooltip there is a simple way.

You can insert a Tag inside Title of Martial Ui Tooltip for example :

<Tooltip title={<span>YourText</span>}>
   <Button>Grow</Button>
</Tooltip>

then you can style your tag anyhow you want.

check below Example :