How to style React Material UI tooltip?

Sometimes, we want to style React Material UI tooltip.

In this article, we’ll look at how to style React Material UI tooltip.

How to style React Material UI tooltip?

To style React Material UI tooltip, we can use the makeStyles function.

For instance, we write:

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

import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";
import DeleteIcon from "@material-ui/icons/Delete";

const useStyles = makeStyles(() => ({
  customTooltip: {
    backgroundColor: "rgba(220, 0, 78, 0.8)"
  },
  customArrow: {
    color: "rgba(220, 0, 78, 0.8)"
  }
}));

const TooltipExample = () => {
  const classes = useStyles();

  return (
    <>
      <Tooltip
        classes={{
          tooltip: classes.customTooltip,
          arrow: classes.customArrow
        }}
        title="Delete"
        arrow
      >
        <Button color="secondary">
          <DeleteIcon />
        </Button>
      </Tooltip>
    </>
  );
};

export default function App() {
  return (
    <div>
      <TooltipExample />
    </div>
  );
}

We call makeStyles with a function that returns an object that has some classes with some styles.

We set the background color and the color in the classes.

Next, in the TooltipExample component, we set the classes prop to an object with class names as the properties.

We set the classes for the tooltip and arrow separately.

Finally, we add the Button and DeleteIcon so that we see the tooltip when we hover over the button.

As a result, the tooltip has a red background and white text.

Conclusion

To style React Material UI tooltip, we can use the makeStyles function.