import Menu from '@material-ui/core/Menu';
import IconButton from '@material-ui/core/IconButton';
import { PopoverOrigin } from '@material-ui/core/Popover';
+import { Tooltip } from '@material-ui/core';
interface DropdownMenuProps {
id: string;
icon: React.ReactElement<any>;
+ title: string;
}
interface DropdownMenuState {
};
transformOrigin: PopoverOrigin = {
- vertical: "top",
- horizontal: "center"
+ vertical: -50,
+ horizontal: 0
};
render() {
- const { icon, id, children } = this.props;
+ const { icon, id, children, title } = this.props;
const { anchorEl } = this.state;
return (
<div>
aria-haspopup="true"
color="inherit"
onClick={this.handleOpen}>
- {icon}
+ <Tooltip title={title}>
+ {icon}
+ </Tooltip>
</IconButton>
<Menu
id={id}
open={Boolean(anchorEl)}
onClose={this.handleClose}
onClick={this.handleClose}
- anchorOrigin={this.transformOrigin}
transformOrigin={this.transformOrigin}>
{children}
</Menu>