text: import React from 'react';
  import PropTypes from 'prop-types';
  import { withStyles } from '@material-ui/core/styles';
  import Button from '@material-ui/core/Button';
  import Tooltip from '@material-ui/core/Tooltip';
  import Typography from '@material-ui/core/Typography';
  
  function arrowGenerator(color) {
    return {
      '&[x-placement*="bottom"] $arrow': {
        top: 0,
        left: 0,
        marginTop: '-0.95em',
        width: '3em',
        height: '1em',
        '&::before': {
          borderWidth: '0 1em 1em 1em',
          borderColor: `transparent transparent ${color} transparent`,
        },
      },
      '&[x-placement*="top"] $arrow': {
        bottom: 0,
        left: 0,
        marginBottom: '-0.95em',
        width: '3em',
        height: '1em',
        '&::before': {
          borderWidth: '1em 1em 0 1em',
          borderColor: `${color} transparent transparent transparent`,
        },
      },
      '&[x-placement*="right"] $arrow': {
        left: 0,
        marginLeft: '-0.95em',
        height: '3em',
        width: '1em',
        '&::before': {
          borderWidth: '1em 1em 1em 0',
          borderColor: `transparent ${color} transparent transparent`,
        },
      },
      '&[x-placement*="left"] $arrow': {
        right: 0,
        marginRight: '-0.95em',
        height: '3em',
        width: '1em',
        '&::before': {
          borderWidth: '1em 0 1em 1em',
          borderColor: `transparent transparent transparent ${color}`,
        },
      },
    };
  }
  
  const styles = theme => ({
    button: {
      margin: theme.spacing(1),
    },
    lightTooltip: {
      backgroundColor: theme.palette.common.white,
      color: 'rgba(0, 0, 0, 0.87)',
      boxShadow: theme.shadows[1],
      fontSize: 11,
    },
    arrowPopper: arrowGenerator(theme.palette.grey[700]),
    arrow: {
      position: 'absolute',
      fontSize: 6,
      width: '3em',
      height: '3em',
      '&::before': {
        content: '""',
        margin: 'auto',
        display: 'block',
        width: 0,
        height: 0,
        borderStyle: 'solid',
      },
    },
    bootstrapPopper: arrowGenerator(theme.palette.common.black),
    bootstrapTooltip: {
      backgroundColor: theme.palette.common.black,
    },
    bootstrapPlacementLeft: {
      margin: '0 8px',
    },
    bootstrapPlacementRight: {
      margin: '0 8px',
    },
    bootstrapPlacementTop: {
      margin: '8px 0',
    },
    bootstrapPlacementBottom: {
      margin: '8px 0',
    },
    htmlPopper: arrowGenerator('#dadde9'),
    htmlTooltip: {
      backgroundColor: '#f5f5f9',
      color: 'rgba(0, 0, 0, 0.87)',
      maxWidth: 220,
      fontSize: theme.typography.pxToRem(12),
      border: '1px solid #dadde9',
      '& b': {
        fontWeight: theme.typography.fontWeightMedium,
      },
    },
  });
  
  class CustomizedTooltips extends React.Component {
    state = {
      arrowRef: null,
    };
  
    handleArrowRef = node => {
      this.setState({
        arrowRef: node,
      });
    };
  
    render() {
      const { classes } = this.props;
  
      return (
        <div>
          <Tooltip title="Add" classes={{ tooltip: classes.lightTooltip }}>
            <Button className={classes.button}>Light</Button>
          </Tooltip>
          <Tooltip
            title={
              <React.Fragment>
                Add
                <span className={classes.arrow} ref={this.handleArrowRef} />
              </React.Fragment>
            }
            classes={{ popper: classes.arrowPopper }}
            PopperProps={{
              popperOptions: {
                modifiers: {
                  arrow: {
                    enabled: Boolean(this.state.arrowRef),
                    element: this.state.arrowRef,
                  },
                },
              },
            }}
          >
            <Button className={classes.button}>Arrow</Button>
          </Tooltip>
          <Tooltip
            title={
              <React.Fragment>
                Add
                <span className={classes.arrow} ref={this.handleArrowRef} />
              </React.Fragment>
            }
            classes={{
              tooltip: classes.bootstrapTooltip,
              popper: classes.bootstrapPopper,
              tooltipPlacementLeft: classes.bootstrapPlacementLeft,
              tooltipPlacementRight: classes.bootstrapPlacementRight,
              tooltipPlacementTop: classes.bootstrapPlacementTop,
              tooltipPlacementBottom: classes.bootstrapPlacementBottom,
            }}
            PopperProps={{
              popperOptions: {
                modifiers: {
                  arrow: {
                    enabled: Boolean(this.state.arrowRef),
                    element: this.state.arrowRef,
                  },
                },
              },
            }}
          >
            <Button className={classes.button}>Bootstrap</Button>
          </Tooltip>
          <Tooltip
            classes={{
              popper: classes.htmlPopper,
              tooltip: classes.htmlTooltip,
            }}
            PopperProps={{
              popperOptions: {
                modifiers: {
                  arrow: {
                    enabled: Boolean(this.state.arrowRef),
                    element: this.state.arrowRef,
                  },
                },
              },
            }}
            title={
              <React.Fragment>
                <Typography color="inherit">Tooltip with HTML</Typography>
                <em>{"And here's"}</em> <b>{'some'}</b> <u>{'amazing content'}</u>.{' '}
                {"It's very engaging. Right?"}
                <span className={classes.arrow} ref={this.handleArrowRef} />
              </React.Fragment>
            }
          >
            <Button className={classes.button}>HTML</Button>
          </Tooltip>
        </div>
      );
    }
  }
  
  CustomizedTooltips.propTypes = {
    classes: PropTypes.object.isRequired,
  };
  
  export default withStyles(styles)(CustomizedTooltips);
  