Material UI — Customize Tooltips

Material UI is a Material Design library made for React.

It’s a set of React components that have Material Design styles.

In this article, we’ll look at how to customize tooltips with Material UI.

Triggers

We can change how tooltips are triggered.

To disable displaying tooltip on hover, we can use the disableHoverListener prop.

The disableFocusListener prop lets us disable display tooltip when we focus on an element.

disableTouchListener lets us disable tooltip display when we touch an element.

For example, we can write:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <div>
      <Tooltip title="Delete File" disableFocusListener disableTouchListener>
        <IconButton>
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}

to disable the focus and touch listeners.

This way, we’ll see the tooltip if we hover or click on it.

We can also control the opening of the tooltip the way we want.

We can just make it show on click and disappears when we click away.

To do that, we write:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";
import ClickAwayListener from "@material-ui/core/ClickAwayListener";

export default function App() {
  const [open, setOpen] = React.useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <ClickAwayListener onClickAway={handleTooltipClose}>
        <Tooltip
          open={open}
          title="Delete File"
          disableFocusListener
          disableHoverListener
          disableTouchListener
        >
          <IconButton onClick={handleTooltipOpen}>
            <DeleteIcon />
          </IconButton>
        </Tooltip>
      </ClickAwayListener>
    </div>
  );
}

We added a ClickAwayListener to close the tooltip with the handleTooltipClose function when we click away.

And when we click on the IconButton , the handleTooltipOpen will open the tooltip.

These are done by changing the open state.

We pass it straight into the open prop of the Tooltip .

Also, we have disableFocusListener, disableHoverListener , and disableTouchListener to disable all the listeners.

Controlled Tooltips

To make a tooltip a controlled tooltip, we can use the open , onClose and onOpen props.

For example, we can write:

import React from "react";
import DeleteIcon from "@material-ui/icons/Delete";
import IconButton from "@material-ui/core/IconButton";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  const [open, setOpen] = React.useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <div>
      <Tooltip
        open={open}
        onClose={handleTooltipClose}
        onOpen={handleTooltipOpen}
        title="Delete File"
      >
        <IconButton>
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );
}

to add a Tooltip with the opening and closing of it controlled by the open prop.

The prop is set to the open state.

Then we have the onClose prop to set the tooltip to close when we do something like hover away to close it.

It sets the open state to false .

We also have the onOpen prop to open the tooltip by setting the open state to true .

Variable Width

We can change the width of the tooltip by setting the tooltip class with a custom width.

For example, we can write:

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

const useStyles = makeStyles(theme => ({
  customWidth: {
    maxWidth: 500
  }
}));

const longText = `
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam sagittis ullamcorper vehicula. Integer viverra est sed purus vulputate tempus. Vestibulum facilisis, metus et sollicitudin cursus, mi sapien suscipit nunc, vitae tristique diam tortor a urna. Proin auctor, ante ac viverra posuere, urna tortor semper mauris,
`;

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

  return (
    <div>
      <Tooltip title={longText} classes={{ tooltip: classes.customWidth }}>
        <Button className={classes.button}>hover me</Button>
      </Tooltip>
    </div>
  );
}

We add a longText string which we pass into the title prop.

This will be displayed.

classes has the classes for the tooltip.

We set the tooltip property, to set the tooltip class to the customWidth class returned by makeStyles .

Interactive

We can make a tooltip interactive the interactive prop.

This way, it won’t close when the user hovers over the tooltip before the delay to close it expires.

For example, we can write:

import React from "react";
import Button from "@material-ui/core/Button";
import Tooltip from "@material-ui/core/Tooltip";

export default function App() {
  return (
    <Tooltip title="tooltip" interactive>
      <Button>Interactive</Button>
    </Tooltip>
  );
}

This way, we’ll see a delay before it closes when we hover away from the button.

Conclusion

There are many ways to customize tooltips.

We can change how it’s triggered.

Also, we can set leave delays, the width, and make it a controlled component.