content: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  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 DeleteIcon from '@material-ui/icons/Delete';
  
  const styles = theme => ({
    root: {
      height: 380,
    },
    speedDial: {
      position: 'absolute',
      bottom: theme.spacing(2),
      right: theme.spacing(3),
    },
  });
  
  const actions = [
    { icon: <FileCopyIcon />, name: 'Copy' },
    { icon: <SaveIcon />, name: 'Save' },
    { icon: <PrintIcon />, name: 'Print' },
    { icon: <ShareIcon />, name: 'Share' },
    { icon: <DeleteIcon />, name: 'Delete' },
  ];
  
  class SpeedDialTooltipOpen extends React.Component {
    state = {
      open: false,
      hidden: false,
    };
  
    handleVisibility = () => {
      this.setState(state => ({
        open: false,
        hidden: !state.hidden,
      }));
    };
  
    handleClick = () => {
      this.setState(state => ({
        open: !state.open,
      }));
    };
  
    handleOpen = () => {
      if (!this.state.hidden) {
        this.setState({
          open: true,
        });
      }
    };
  
    handleClose = () => {
      this.setState({
        open: false,
      });
    };
  
    render() {
      const { classes } = this.props;
      const { hidden, open } = this.state;
  
      return (
        <div className={classes.root}>
          <Button onClick={this.handleVisibility}>Toggle Speed Dial</Button>
          <SpeedDial
            ariaLabel="SpeedDial tooltip example"
            className={classes.speedDial}
            hidden={hidden}
            icon={<SpeedDialIcon />}
            onBlur={this.handleClose}
            onClick={this.handleClick}
            onClose={this.handleClose}
            onFocus={this.handleOpen}
            onMouseEnter={this.handleOpen}
            onMouseLeave={this.handleClose}
            open={open}
          >
            {actions.map(action => (
              <SpeedDialAction
                key={action.name}
                icon={action.icon}
                tooltipTitle={action.name}
                tooltipOpen
                onClick={this.handleClick}
              />
            ))}
          </SpeedDial>
        </div>
      );
    }
  }
  
  SpeedDialTooltipOpen.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(SpeedDialTooltipOpen);
  