Tooltips

Tooltips display informative text when users hover over, focus on, or tap an element.

When activated, Tooltips display a text label identifying an element, such as a description of its function.

Simple Tooltips

<Grid container spacing={2}>
  <Grid item xs="auto">
    <Tooltip title="Delete">
      <IconButton aria-label="Delete">
        <Delete />
      </IconButton>
    </Tooltip>
  </Grid>
  <Grid item xs="auto">
    <Tooltip title="Add" aria-label="Add">
      <Fab color="primary">
        <Add />
      </Fab>
    </Tooltip>
  </Grid>
  <Grid item container xs={12} justify="flex-end">
    <Tooltip title="Add" aria-label="Add">
      <Fab color="secondary">
        <Add />
      </Fab>
    </Tooltip>
  </Grid>
</Grid>

<Grid container spacing={2}>
  <Grid item xs="auto">
    <Tooltip title="Delete">
      <IconButton aria-label="Delete">
        <Delete />
      </IconButton>
    </Tooltip>
  </Grid>
  <Grid item xs="auto">
    <Tooltip title="Add" aria-label="Add">
      <Fab color="primary">
        <Add />
      </Fab>
    </Tooltip>
  </Grid>
  <Grid item container xs={12} justify="flex-end">
    <Tooltip title="Add" aria-label="Add">
      <Fab color="secondary">
        <Add />
      </Fab>
    </Tooltip>
  </Grid>
</Grid>

Positioned Tooltips

The Tooltip has 12 placements choice. They don’t have directional arrows; instead, they rely on motion emanating from the source to convey direction.

<div style={{ maxWidth: '500px' }}>
  <Grid container justify="center">
    <Grid item>
      <Tooltip title="Add" placement="top-start">
        <Button variant="text">top-start</Button>
      </Tooltip>
      <Tooltip title="Add" placement="top">
        <Button variant="text">top</Button>
      </Tooltip>
      <Tooltip title="Add" placement="top-end">
        <Button variant="text">top-end</Button>
      </Tooltip>
    </Grid>
  </Grid>
  <Grid container justify="center">
    <Grid item xs={6}>
      <Tooltip title="Add" placement="left-start">
        <Button variant="text">left-start</Button>
      </Tooltip>
      <br />
      <Tooltip title="Add" placement="left">
        <Button variant="text">left</Button>
      </Tooltip>
      <br />
      <Tooltip title="Add" placement="left-end">
        <Button variant="text">left-end</Button>
      </Tooltip>
    </Grid>
    <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
      <Grid item>
        <Tooltip title="Add" placement="right-start">
          <Button variant="text">right-start</Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title="Add" placement="right">
          <Button variant="text">right</Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title="Add" placement="right-end">
          <Button variant="text">right-end</Button>
        </Tooltip>
      </Grid>
    </Grid>
  </Grid>
  <Grid container justify="center">
    <Grid item>
      <Tooltip title="Add" placement="bottom-start">
        <Button variant="text">bottom-start</Button>
      </Tooltip>
      <Tooltip title="Add" placement="bottom">
        <Button variant="text">bottom</Button>
      </Tooltip>
      <Tooltip title="Add" placement="bottom-end">
        <Button variant="text">bottom-end</Button>
      </Tooltip>
    </Grid>
  </Grid>
</div>

<div style={{ maxWidth: '500px' }}>
  <Grid container justify="center">
    <Grid item>
      <Tooltip title="Add" placement="top-start">
        <Button variant="text">top-start</Button>
      </Tooltip>
      <Tooltip title="Add" placement="top">
        <Button variant="text">top</Button>
      </Tooltip>
      <Tooltip title="Add" placement="top-end">
        <Button variant="text">top-end</Button>
      </Tooltip>
    </Grid>
  </Grid>
  <Grid container justify="center">
    <Grid item xs={6}>
      <Tooltip title="Add" placement="left-start">
        <Button variant="text">left-start</Button>
      </Tooltip>
      <br />
      <Tooltip title="Add" placement="left">
        <Button variant="text">left</Button>
      </Tooltip>
      <br />
      <Tooltip title="Add" placement="left-end">
        <Button variant="text">left-end</Button>
      </Tooltip>
    </Grid>
    <Grid item container xs={6} alignItems="flex-end" direction="column" spacing={0}>
      <Grid item>
        <Tooltip title="Add" placement="right-start">
          <Button variant="text">right-start</Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title="Add" placement="right">
          <Button variant="text">right</Button>
        </Tooltip>
      </Grid>
      <Grid item>
        <Tooltip title="Add" placement="right-end">
          <Button variant="text">right-end</Button>
        </Tooltip>
      </Grid>
    </Grid>
  </Grid>
  <Grid container justify="center">
    <Grid item>
      <Tooltip title="Add" placement="bottom-start">
        <Button variant="text">bottom-start</Button>
      </Tooltip>
      <Tooltip title="Add" placement="bottom">
        <Button variant="text">bottom</Button>
      </Tooltip>
      <Tooltip title="Add" placement="bottom-end">
        <Button variant="text">bottom-end</Button>
      </Tooltip>
    </Grid>
  </Grid>
</div>

Controlled

You can use the open, onOpen and onClose properties to control the behavior of the tooltip.

class ControlledTooltips extends React.Component {
  constructor(props) {
    super(props);

    this.handleTooltipClose = this.handleTooltipClose.bind(this);
    this.handleTooltipOpen = this.handleTooltipOpen.bind(this);

    this.state = {
      open: false,
    };
  }

  handleTooltipClose() {
    this.setState({ open: false });
  }

  handleTooltipOpen() {
    this.setState({ open: true });
  }

  render() {
    return (
      <Tooltip
        onClose={this.handleTooltipClose}
        onOpen={this.handleTooltipOpen}
        open={this.state.open}
        title="Add"
      >
        <Button>Controlled</Button>
      </Tooltip>
    );
  }
}

class ControlledTooltips extends React.Component {
  constructor(props) {
    super(props);

    this.handleTooltipClose = this.handleTooltipClose.bind(this);
    this.handleTooltipOpen = this.handleTooltipOpen.bind(this);

    this.state = {
      open: false,
    };
  }

  handleTooltipClose() {
    this.setState({ open: false });
  }

  handleTooltipOpen() {
    this.setState({ open: true });
  }

  render() {
    return (
      <Tooltip
        onClose={this.handleTooltipClose}
        onOpen={this.handleTooltipOpen}
        open={this.state.open}
        title="Add"
      >
        <Button>Controlled</Button>
      </Tooltip>
    );
  }
}

Transitions

Use a different transition.

<div>
  <Tooltip title="Add">
    <Button variant="text">Grow</Button>
  </Tooltip>
  <Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title="Add">
    <Button variant="text">Fade</Button>
  </Tooltip>
  <Tooltip TransitionComponent={Zoom} title="Add">
    <Button variant="text">Zoom</Button>
  </Tooltip>
</div>

<div>
  <Tooltip title="Add">
    <Button variant="text">Grow</Button>
  </Tooltip>
  <Tooltip TransitionComponent={Fade} TransitionProps={{ timeout: 600 }} title="Add">
    <Button variant="text">Fade</Button>
  </Tooltip>
  <Tooltip TransitionComponent={Zoom} title="Add">
    <Button variant="text">Zoom</Button>
  </Tooltip>
</div>

Showing and hiding

The tooltip is normally shown immediately when the user's mouse hovers over the element, and hides immediately when the user's mouse leaves. A delay in showing or hiding the tooltip can be added through the properties enterDelay and leaveDelay, as shown in the Controlled Tooltips demo above.

On mobile, the tooltip is displayed when the user longpresses the element and hides after a delay of 1500ms. You can disable this feature with the disableTouchListener property.

<Tooltip title="Add" enterDelay={500} leaveDelay={200}>
  <Button variant="text">[500ms, 200ms]</Button>
</Tooltip>

<Tooltip title="Add" enterDelay={500} leaveDelay={200}>
  <Button variant="text">[500ms, 200ms]</Button>
</Tooltip>