Material-UI Tooltips

A Material-ui tooltip plugin is a small pop-up element that appears while the user moves the mouse pointer over an element.
Keep reading these examples for adding custom tooltips with CSS and JavaScript using CSS3 for animations and data-attributes for local title storage.

Example

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

export default function PositionedTooltips() {
  return (
    <>
      <Tooltip title="Tooltip on top" placement="top" arrow>
        <Box marginRight="1rem" display="inline-block">
          <Button color="primary" variant="contained" size="small">
            Tooltip on top
          </Button>
        </Box>
      </Tooltip>
      <Tooltip title="Tooltip on left" placement="left" arrow>
        <Box marginRight="1rem" display="inline-block">
          <Button color="primary" variant="contained" size="small">
            Tooltip on left
          </Button>
        </Box>
      </Tooltip>
      <Tooltip title="Tooltip on right" placement="right" arrow>
        <Box marginRight="1rem" display="inline-block">
          <Button color="primary" variant="contained" size="small">
            Tooltip on right
          </Button>
        </Box>
      </Tooltip>
      <Tooltip title="Tooltip on bottom" placement="bottom" arrow>
        <Box marginRight="1rem" display="inline-block">
          <Button color="primary" variant="contained" size="small">
            Tooltip on bottom
          </Button>
        </Box>
      </Tooltip>
    </>
  );
}

Props

If you want to see more examples and properties please check the official Material-UI Documentation.