Material ui 材质UI中包含内容的工具提示

我有以下工具提示：

export const EstimateTableActions = () => {
  return (
    <>
      <Tooltip title="Actions" aria-label="add">
        <Fab color="primary">
          <MoreVertIcon />
        </Fab>
      </Tooltip>
    </>
  );
};

export const EstimateTableActions=（）=>{
返回(
);
};

这看起来像：

---

我想在工具提示中添加内容，我想在单击后在我的操作中添加一些div，在文档中没有任何示例，有什么想法吗？

您可以使用快速拨号组件添加您选择的操作--

从“React”导入React；
从'@material ui/core/styles'导入{makeStyles}；
从“@material ui/core/Button”导入按钮；
从“@material ui/core/background”导入背景；
从“@material ui/lab/SpeedDial”导入SpeedDial；
从“@material ui/lab/SpeedDialIcon”导入SpeedDialIcon；
从“@material ui/lab/SpeedDialAction”导入SpeedDialAction；
从“@material ui/icons/filecopycon”导入filecopycon；
从“@material ui/icons/Save”导入SaveIcon；
从“@material ui/icons/Print”导入PrintIcon；
从“@material ui/icons/Share”导入ShareIcon；
从“@material ui/icons/Favorite”导入收藏夹图标；
const useStyles=makeStyles（（主题）=>({
根目录：{
身高：380，
转换：“translateZ（0px）”，
flexGrow:1，
},
快速拨号：{
位置：'绝对'，
底部：主题。间距（2），
右：主题。间距（2），
},
}));
常量动作=[
{图标：，名称：'复制'}，
{图标：，名称：'保存'}，
{图标：，名称：'Print'}，
{图标：，名称：'共享'}，
{图标：，名称：'Like'}，
];
导出默认函数SpeedDialTooltipOpen（）{
const classes=useStyles（）；
const[open，setOpen]=React.useState（false）；
const[hidden，setHidden]=React.useState（false）；
常量可处理性=（）=>{
setHidden（（prevHidden）=>！prevHidden）；
};
const handleOpen=（）=>{
setOpen（真）；
};
常量handleClose=（）=>{
setOpen（假）；
};
返回(
拨动速盘
{actions.map（（action）=>(
))}
);
}

在这里工作沙箱-

import React from 'react';
import { makeStyles } from '@material-ui/core/styles';
import Button from '@material-ui/core/Button';
import Backdrop from '@material-ui/core/Backdrop';
import SpeedDial from '@material-ui/lab/SpeedDial';
import SpeedDialIcon from '@material-ui/lab/SpeedDialIcon';
import SpeedDialAction from '@material-ui/lab/SpeedDialAction';
import FileCopyIcon from '@material-ui/icons/FileCopyOutlined';
import SaveIcon from '@material-ui/icons/Save';
import PrintIcon from '@material-ui/icons/Print';
import ShareIcon from '@material-ui/icons/Share';
import FavoriteIcon from '@material-ui/icons/Favorite';

const useStyles = makeStyles((theme) => ({
  root: {
    height: 380,
    transform: 'translateZ(0px)',
    flexGrow: 1,
  },
  speedDial: {
    position: 'absolute',
    bottom: theme.spacing(2),
    right: theme.spacing(2),
  },
}));

const actions = [
  { icon: <FileCopyIcon />, name: 'Copy' },
  { icon: <SaveIcon />, name: 'Save' },
  { icon: <PrintIcon />, name: 'Print' },
  { icon: <ShareIcon />, name: 'Share' },
  { icon: <FavoriteIcon />, name: 'Like' },
];

export default function SpeedDialTooltipOpen() {
  const classes = useStyles();
  const [open, setOpen] = React.useState(false);
  const [hidden, setHidden] = React.useState(false);

  const handleVisibility = () => {
    setHidden((prevHidden) => !prevHidden);
  };

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

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

  return (
    <div className={classes.root}>
      <Button onClick={handleVisibility}>Toggle Speed Dial</Button>
      <Backdrop open={open} />
      <SpeedDial
        ariaLabel="SpeedDial tooltip example"
        className={classes.speedDial}
        hidden={hidden}
        icon={<SpeedDialIcon />}
        onClose={handleClose}
        onOpen={handleOpen}
        open={true}
      >
        {actions.map((action) => (
          <SpeedDialAction
            key={action.name}
            icon={action.icon}
            tooltipTitle={action.name}
            tooltipOpen
            onClick={handleClose}
          />
        ))}
      </SpeedDial>
    </div>
  );
}