Material UI - How to completely remove background \ color from tooltip

Question

I am currently working with Material UI's tooltip and I can't seem to figure out how to make the tooltip's background completely transparent. By default there is a grey background with white text. Changing the Tooltips background color changes the child element's background color since the Tooltip is the parent element in this context.

I've tried this

 <Tooltip title="Add" classes={{
    tooltip: "backgroundColor: transparent"

  }} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>

And this:

<Tooltip title="Add" style={{backgroundColor: "transparent"}} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>

My objective is to have no background on hover of the tooltip. I just want to see the text.

Answer 1

There are several methods for customizing components, as described in the documentation:

1. Specific variation for a one-time situation
2. Dynamic variation for a one-time situation
3. Specific variation of a component re-used in different contexts
4. Material Design variations such as with the button component
5. Global theme variation

It appears you want to use the first method and override the style with a class. To do this we'll use makeStyles and define a background for the tooltip, something like this:

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

const useStyles = makeStyles({
  tooltip: {
    background: 'transparent',
  },
});

export default function ClassesNesting() {
  const classes = useStyles();

  return (
    <Tooltip
      classes={classes}
    >
      Button
    </Tooltip>
  );
}

Answer 2

Since you want only the text on hover with no background of the tooltip.

Define style like this:

const useStylesBootstrap = makeStyles(theme => ({
  tooltip: {
    backgroundColor: "transparent",
    color: theme.palette.common.black
  }
}));

Use it in your React component like this:

const tooltipClass = useStylesBootstrap();

return (
  <Tooltip title="Add" classes={tooltipClass} aria-label="add">
    <Fab color="transparent" className={classes.fab}>
      <AddIcon />
    </Fab>
  </Tooltip>
);

Answer 3

APP.css

Styles applied to the tooltip (label wrapper) element.

.MuiTooltip-tooltip {
    background-color: #EDEEEF!important;
    color: #2f343D!important;
  }