Tooltip with content in Material-UI - material-ui

Question

I have following tooltip:
export const EstimateTableActions = () => {
return (
<>
<Tooltip title="Actions" aria-label="add">
<Fab color="primary">
<MoreVertIcon />
</Fab>
</Tooltip>
</>
);
};
which looks like:
And I want to add content to the tooltip, I want to have some div with my actions after click, in the documentation there is no any example on that, any idea?

Answer 1

You can use speed dial component to add actions of your choice --
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>
);
}
Working sandbox here - https://codesandbox.io/s/qogpp