如何在Material UI中制作箭头对话框

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

const useStyles = makeStyles((theme) => ({
  arrowBox: {
    position: 'relative',
    display: 'inline-block',
    margin: theme.spacing(2),
  },
  arrow: {
    position: 'absolute',
    width: 0,
    height: 0,
    borderLeft: '10px solid transparent',
    borderRight: '10px solid transparent',
    borderBottom: '10px solid #000',
    top: '-10px',
    left: '50%',
    transform: 'translateX(-50%)',
  },
  content: {
    padding: theme.spacing(2),
  },
}));

const ArrowDialog = () => {
  const classes = useStyles();
  const [anchorEl, setAnchorEl] = React.useState(null);

  const handleClick = (event) => {
    setAnchorEl(event.currentTarget);
  };

  const handleClose = () => {
    setAnchorEl(null);
  };

  const open = Boolean(anchorEl);
  const id = open ? 'arrow-dialog' : undefined;

  return (
    <div className={classes.arrowBox}>
      <Tooltip title="点击显示对话框">
        <div onClick={handleClick}>
          <div className={classes.arrow}></div>
        </div>
      </Tooltip>
      <Popover
        id={id}
        open={open}
        anchorEl={anchorEl}
        onClose={handleClose}
        anchorOrigin={{
          vertical: 'bottom',
          horizontal: 'center',
        }}
        transformOrigin={{
          vertical: 'top',
          horizontal: 'center',
        }}
      >
        <div className={classes.content}>
          这是一个箭头对话框的内容。
        </div>
      </Popover>
    </div>
  );
};

const App = () => {
  return (
    <div>
      <ArrowDialog />
    </div>
  );
};