Category: JavaScript

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 add lists with Material UI.

Interactive Lists

We can add various kinds of lists with Material UI.

The simplest kind if the ones with only texts in each entry.

To add a text-only list, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We add a list with all text by using the ListItemText component.

primary is the primary text to display for each item.

To add a list with icons, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemIcon>
              <FolderIcon />
            </ListItemIcon>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

We have the ListItemIcon to position the icon.

FolderIcon has the icon.

The icon will be displayed on the left of the text.

Also, we can add avatars in a similar way.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

Then we have an avatar of the folder icon on the left of the text instead of just the folder icon itself.

We use the ListItemAvatar to surround the Avater and FolderIcon to place them properly.

We can also add an icon to the right of the text.

It’ll be placed on the right edge of the list item.

To do that, we can use the ListItemSecondaryAction component.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText primary={f.name} key={f.key} />
            <ListItemSecondaryAction>
              <IconButton edge="end">
                <DeleteIcon />
              </IconButton>
            </ListItemSecondaryAction>
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to add the ListItemSecondaryAction below the ListItemText .

This will place the secondary action icon on the right edge.

Align List Items

To align list items when displaying 3 lines or more, we can set the alignItems prop to flex-start .

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemText from "@material-ui/core/ListItemText";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import Avatar from "@material-ui/core/Avatar";
import FolderIcon from "@material-ui/icons/Folder";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";
import IconButton from "@material-ui/core/IconButton";
import DeleteIcon from "@material-ui/icons/Delete";

const fruits = [
  { key: 1, name: "apple" },
  { key: 2, name: "orange" },
  { key: 3, name: "banana" }
];

export default function App() {
  return (
    <div>
      <List component="nav">
        {fruits.map(f => (
          <ListItem alignItems="flex-start" key={f.key}>
            <ListItemAvatar>
              <Avatar>
                <FolderIcon />
              </Avatar>
            </ListItemAvatar>
            <ListItemText
              primary={f.name}
              secondary="Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean mollis, metus vitae vestibulum suscipit, eros nisi ultrices urna, facilisis dictum erat dolor non justo. "
            />
          </ListItem>
        ))}
      </List>
    </div>
  );
}

to move the icon slightly down to align better with the long text.

Conclusion

We can make lists with icons in various locations.

The icon can be on the left or the right of the text.

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 add icons and lists with Material UI.

Icon Color

We can change the color of icons.

To do that, we add the color prop to the icon.

For example, we can write:

import React from "react";
import red from "@material-ui/core/colors/red";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon />
      <MailIcon color="primary" />
      <MailIcon color="secondary" />
      <MailIcon color="action" />
      <MailIcon color="disabled" />
      <MailIcon style={{ color: red[500] }} />
    </div>
  );
}

to add icons with different colors.

The color prop lets us change the color style of the icon.

We can also change it with the style prop.

We set the color by import the color from Material UI.

Size

To change the size of an icon, we can change the fontSize prop.

For example, we can write:

import React from "react";
import MailIcon from "@material-ui/icons/Mail";

export default function App() {
  return (
    <div>
      <MailIcon fontSize="small" />
      <MailIcon />
      <MailIcon fontSize="large" />
      <MailIcon style={{ fontSize: 50 }} />
    </div>
  );
}

The fontSize can be set to small or large .

To set a custom size, we can also set the style prop with the fontSize of our choice.

Font icons

To add our own icons from the Material Icons CDN, we can add a link tag to index.html :

<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons" />

Once we did that, we can use the Icon component:

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

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

We can also change the color with this component.

For example, we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon>star</Icon>
      <Icon color="primary">star</Icon>
      <Icon color="secondary">star</Icon>
      <Icon style={{ color: green[500] }}>star</Icon>
      <Icon fontSize="small">star</Icon>
    </div>
  );
}

We have the name of the icon in between the tags.

And we set the color prop to change the color.

Font Awesome

In addition to Material Icons, we can add Font Awesome icons.

We can use version 5 without signing up.

We just have to add:

<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/all.css"
/>
<link
  rel="stylesheet"
  href="https://use.fontawesome.com/releases/v5.13.1/css/v4-shims.css"
/>

Then we can write:

import React from "react";
import green from "@material-ui/core/colors/green";
import Icon from "@material-ui/core/Icon";

export default function App() {
  return (
    <div>
      <Icon className="fa fa-close" />
      <Icon className="fa fa-close" color="primary" />
      <Icon className="fa fa-close" color="secondary" />
      <Icon className="fa fa-close" style={{ color: green[500] }} />
      <Icon className="fa fa-close" fontSize="small" />
    </div>
  );
}

to add our Font Awesome icons.

The props work with Font Awesome icons.

Lists

Lists are continuous containers of text and images.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Divider from "@material-ui/core/Divider";
import InboxIcon from "@material-ui/icons/Inbox";
import DraftsIcon from "@material-ui/icons/Drafts";

export default function App() {
  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
      </List>
      <Divider />
      <List component="nav">
        <ListItem button>
          <ListItemText primary="logout" />
        </ListItem>
      </List>
    </div>
  );
}

to add a list with the List component.

To add items inside the list, we can add one or moreListItem components inside it.

The button prop will make them render as buttons.

List items can have icons beside it.

Also, we can add Dividers to add dividers.

Nested List

Lists can be nested.

To do that, we add a Collapse component within our List .

For instance, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Collapse from "@material-ui/core/Collapse";
import InboxIcon from "@material-ui/icons/MoveToInbox";
import DraftsIcon from "@material-ui/icons/Drafts";

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

  const handleClick = () => {
    setOpen(!open);
  };

  return (
    <div>
      <List component="nav">
        <ListItem button>
          <ListItemIcon>
            <InboxIcon />
          </ListItemIcon>
          <ListItemText primary="home" />
        </ListItem>
        <ListItem button onClick={handleClick}>
          <ListItemIcon>
            <DraftsIcon />
          </ListItemIcon>
          <ListItemText primary="mail" />
        </ListItem>
        <Collapse in={open} timeout="auto" unmountOnExit>
          <List component="div" disablePadding>
            <ListItem button>
              <ListItemText primary="important mail" />
            </ListItem>
          </List>
        </Collapse>
      </List>
    </div>
  );
}

to add a Collapse component into our List .

The in prop controls when the nested list is expanded.

unmountOnExit will remove the nested list from the DOM.

We control whether it’s opened or not with the 2nd ListItem .

The handleClick component toggles the open state.

Conclusion

We can add icons from various sources with Material UI.

Also, we can add lists to display items vertically.

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 add dividers and icons with Material UI.

Subheader Dividers

We can have dividers with text immediately below it.

To do that, we add some styles of our own to shift the text to be flush with the dividers.

For example, we can write:

import React from "react";
import { makeStyles } from "@material-ui/core/styles";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemText from "@material-ui/core/ListItemText";
import Avatar from "@material-ui/core/Avatar";
import BeachAccessIcon from "@material-ui/icons/BeachAccess";
import Divider from "@material-ui/core/Divider";
import Typography from "@material-ui/core/Typography";

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360,
    backgroundColor: theme.palette.background.paper
  },
  dividerFullWidth: {
    margin: `5px 0 0 ${theme.spacing(2)}px`
  },
  dividerInset: {
    margin: `5px 0 0 ${theme.spacing(9)}px`
  }
}));

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

  return (
    <List className={classes.root}>
      <ListItem>
        <ListItemText primary="eat" />
      </ListItem>
      <Divider component="li" />
      <li>
        <Typography
          className={classes.dividerFullWidth}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          drink
        </Typography>
      </li>
      <ListItem>
        <ListItemText primary="drink" />
      </ListItem>
      <Divider component="li" variant="inset" />
      <li>
        <Typography
          className={classes.dividerInset}
          color="textSecondary"
          display="block"
          variant="caption"
        >
          Leisure
        </Typography>
      </li>
      <ListItem>
        <ListItemAvatar>
          <Avatar>
            <BeachAccessIcon />
          </Avatar>
        </ListItemAvatar>
        <ListItemText primary="walk" />
      </ListItem>
    </List>
  );
}

to add some list items with a divider below them.

And then we add text with the Typography component.

This way, we see the text with the margins.

Middle Dividers

We can add dividers that display in the middle of a container.

To add the middle divider, we can write:

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

const useStyles = makeStyles(theme => ({
  root: {
    width: "100%",
    maxWidth: 360
  },
  section1: {
    margin: theme.spacing(4, 2)
  },
  section2: {
    margin: theme.spacing(2)
  }
}));

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

  return (
    <div className={classes.root}>
      <div className={classes.section1}>
        <Grid container alignItems="center">
          <Grid item xs>
            <Typography gutterBottom variant="h4">
              Message
            </Typography>
          </Grid>
        </Grid>
      </div>
      <Divider variant="middle" />
      <div className={classes.section2}>
        <Typography gutterBottom variant="body1">
          hello world
        </Typography>
      </div>
      <div>
        <Button color="primary">ok</Button>
      </div>
    </div>
  );
}

We have the Divider component with the variant prop set to middle to make it display in the middle.

Then we have the styles in the makeStyles callback to move the text so that it’s flush with the divider.

Vertical Dividers

To add vertical dividers, we can use the orientation prop.

We can write:

import React from "react";
import FormatAlignLeftIcon from "@material-ui/icons/FormatAlignLeft";
import FormatBoldIcon from "@material-ui/icons/FormatBold";
import Grid from "@material-ui/core/Grid";
import Divider from "@material-ui/core/Divider";

export default function App() {
  return (
    <div>
      <Grid container alignItems="center">
        <FormatAlignLeftIcon />
        <Divider orientation="vertical" flexItem />
        <FormatBoldIcon />
      </Grid>
    </div>
  );
}

to add a vertical divider.

The orientation is set to vertical so that we can see the divider.

Icons

Material UI comes with many icons we can use.

We’ve to install the @material-ui/icons to use the icons.

To do that, we can run:

npm install @material-ui/icons

or:

yarn add @material-ui/icons

to add them to our code.

Then we can use it by importing them as follows:

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

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

We just import them by their name and we’ll see them displayed.

SvgIcon

We can add our own SVG icon if we need to embed one that isn’t found in the package.

For example, we can write:

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

export default function App() {
  return (
    <div>
      <SvgIcon>
        <path d="M5 17H4a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2h-1" />
        <polygon points="12 15 17 21 7 21 12 15" />
      </SvgIcon>
    </div>
  );
}

to add a computed monitor icon available from https://feathericons.com/.

Conclusion

We can customize dividers to out liking so it’s flush with our text.

Icons can be added from the @material-ui/icons package or we can use the SvgIcon package to add them ourselves.

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 lists with Material UI.

List Controls

We can add form controls to list items.

To do that, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import ListItemIcon from "@material-ui/core/ListItemIcon";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem
            key={value}
            role={undefined}
            dense
            button
            onClick={handleToggle(value)}
          >
            <ListItemIcon>
              <Checkbox
                edge="start"
                checked={checked.indexOf(value) !== -1}
                tabIndex={-1}
                disableRipple
              />
            </ListItemIcon>
            <ListItemText primary={` item ${value + 1}`} />
          </ListItem>
        );
      })}
    </List>
  );
}

to add a list with items that have a check on the left side.

We added the Checkbox inside the ListItemIcon .

The edge set to start indicates that it stays on the left side.

The onClick prop is on the ListItem .

The handleToggle function returns a function that adds the index of the checked item to the checked state.

We see if it’s checked by checking if the index is already in the checked array.

If it is, then it’s checked.

Otherwise, it’s not.

If it’s not checked, then the index is pushed into the new array.

Otherwise, we remove the item with splice from the array.

Then we call setChecked to set the state.

And then we can set the checked value of each checkbox in the checked prop of the Checkbox .

We can also add the checkbox as a secondary action:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Checkbox from "@material-ui/core/Checkbox";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem key={value} button>
            <ListItemAvatar>
              <Avatar
                alt={`cat ${value + 1}`}
                src="http://placekitten.com/200/200"
              />
            </ListItemAvatar>
            <ListItemText primary={`item ${value + 1}`} />
            <ListItemSecondaryAction>
              <Checkbox
                edge="end"
                onChange={handleToggle(value)}
                checked={checked.indexOf(value) !== -1}
              />
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  );
}

We have the items listed as we do in the previous example.

ListItemAvatar displays the avatar on the left side.

And ListItemSecondaryAction displays the checkbox on the right side.

edge is set to end to display the checkbox on the right side.

The logic for the checkbox is the same.

Switch

We can add switches to a list item.

For example, we can write:

import React from "react";
import List from "@material-ui/core/List";
import ListItem from "@material-ui/core/ListItem";
import Avatar from "@material-ui/core/Avatar";
import ListItemText from "@material-ui/core/ListItemText";
import Switch from "@material-ui/core/Switch";
import ListItemAvatar from "@material-ui/core/ListItemAvatar";
import ListItemSecondaryAction from "@material-ui/core/ListItemSecondaryAction";

export default function App() {
  const [checked, setChecked] = React.useState([0]);

  const handleToggle = value => () => {
    const currentIndex = checked.indexOf(value);
    const newChecked = [...checked];

    if (currentIndex === -1) {
      newChecked.push(value);
    } else {
      newChecked.splice(currentIndex, 1);
    }

    setChecked(newChecked);
  };

  return (
    <List>
      {[0, 1, 2, 3].map(value => {
        return (
          <ListItem key={value} button>
            <ListItemAvatar>
              <Avatar
                alt={`cat ${value + 1}`}
                src="http://placekitten.com/200/200"
              />
            </ListItemAvatar>
            <ListItemText primary={` item ${value + 1}`} />
            <ListItemSecondaryAction>
              <Switch
                edge="end"
                onChange={handleToggle(value)}
                checked={checked.indexOf(value) !== -1}
              />
            </ListItemSecondaryAction>
          </ListItem>
        );
      })}
    </List>
  );
}

to add a switch to each list item on the right side.

All we did is replace the Checkbox with a Switch .

They take the same props.

Conclusion

We can add controls to the left or right side of the list item.

Also, we can add avatars on the left side of the list item.

Checkboxes and switches can be toggled on and off.

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.