content: import React from 'react';
  import { makeStyles } from '@material-ui/core/styles';
  import Popper from '@material-ui/core/Popper';
  import Typography from '@material-ui/core/Typography';
  import Fade from '@material-ui/core/Fade';
  import Paper from '@material-ui/core/Paper';
  
  const useStyles = makeStyles(theme => ({
    typography: {
      padding: theme.spacing(2),
    },
  }));
  
  export default function FakedReferencePopper() {
    const [open, setOpen] = React.useState(false);
    const [anchorEl, setAnchorEl] = React.useState(null);
    const classes = useStyles();
  
    const handleClose = () => {
      setOpen(false);
    };
  
    const handleMouseUp = () => {
      const selection = window.getSelection();
  
      // Resets when the selection has a length of 0
      if (!selection || selection.anchorOffset === selection.focusOffset) {
        handleClose();
        return;
      }
  
      const getBoundingClientRect = () => selection.getRangeAt(0).getBoundingClientRect();
  
      setOpen(true);
      setAnchorEl({
        clientWidth: getBoundingClientRect().width,
        clientHeight: getBoundingClientRect().height,
        getBoundingClientRect,
      });
    };
  
    const id = open ? 'faked-reference-popper' : undefined;
  
    return (
      <div onMouseLeave={handleClose}>
        <Typography aria-describedby={id} onMouseUp={handleMouseUp}>
          Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam ipsum purus, bibendum sit
          amet vulputate eget, porta semper ligula. Donec bibendum vulputate erat, ac fringilla mi
          finibus nec. Donec ac dolor sed dolor porttitor blandit vel vel purus. Fusce vel malesuada
          ligula. Nam quis vehicula ante, eu finibus est. Proin ullamcorper fermentum orci, quis
          finibus massa. Nunc lobortis, massa ut rutrum ultrices, metus metus finibus ex, sit amet
          facilisis neque enim sed neque. Quisque accumsan metus vel maximus consequat. Suspendisse
          lacinia tellus a libero volutpat maximus.
        </Typography>
        <Popper id={id} open={open} anchorEl={anchorEl} transition placement="bottom-start">
          {({ TransitionProps }) => (
            <Fade {...TransitionProps} timeout={350}>
              <Paper>
                <Typography className={classes.typography}>The content of the Popper.</Typography>
              </Paper>
            </Fade>
          )}
        </Popper>
      </div>
    );
  }
  