I am currently working with Material UI's tooltip and I can't seem to figure out how to make the tooltip's background pletely 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.

I am currently working with Material UI's tooltip and I can't seem to figure out how to make the tooltip's background pletely 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.

• javascript
• css
• reactjs
• material-ui

• 1 Does this answer your question? Material UI's Tooltip - Customization Style – Ryan Cogswell Commented Jan 9, 2020 at 15:48

3 Answers 3

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.mon.black
  }
}));

Use it in your React ponent like this:

const tooltipClass = useStylesBootstrap();

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

There are several methods for customizing ponents, 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 ponent re-used in different contexts
4. Material Design variations such as with the button ponent
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>
  );
}

APP.css

Styles applied to the tooltip (label wrapper) element.

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