Not able to get the Popper in Material UI

Question

Material-UI version "@material-ui/core": "^3.7.0"

I need to show Popper on hover on something and I am not able to see the Popper

This is a container for Popper

    import PropTypes from 'prop-types';
    import React from 'react';
    import InfoCard from './InfoCard';
    import Snackbar from '@material-ui/core/Snackbar';

    class ContainerInfoCard extends React.Component {

      state = {
        copyNotify: false,
        // 
        openCard: false,

        anchorEl: null,
      };

      onUserHoverHandle = event => {
        const { currentTarget } = event;
        this.setState({
          anchorEl: currentTarget,
          openCard: true
        });
      };

      handleCloseUserCard = event => {
        this.setState({
          anchorEl: null,
          openCard: false,
        });
      };

      handleSnackbarClose = (e) => {
        e && e.preventDefault();
        this.setState({
          copyNotify: false,
        });
      };

      render() {
        const { children } = this.props;
        const id = openCard ? 'popper-card' : null;

        return(
          <div>
            <div onMouseLeave={this.handleCloseUserCard}>
              <div 
                onMouseEnter={this.onUserHoverHandle}
                aria-describedby={id}
              >
                {children}
              </div>
              { openCard && (
                <InfoCard 
                  id={id}
                  node={anchorEl}
                  fullName="Full name" 
                  emailAddress="example@gmail.com"
                  open={openCard}
                />
              )}
            </div>
            <Snackbar
              anchorOrigin={{
                vertical: 'bottom',
                horizontal: 'left',
              }}
              open={this.state.copyNotify}
              onClose={this.handleSnackbarClose}
              autoHideDuration={1000}
              ContentProps={{
                'aria-describedby': 'message-id',
              }}
              message={<span id="message-id"> Email copied</span>}
            />
          </div>
        );
      }
    }

    export default ContainerInfoCard;

InfoCard - This one has the Popper

    import Grid from '@material-ui/core/Grid';
    import Paper from '@material-ui/core/Paper';
    import Popper from '@material-ui/core/Popper';
    import React from 'react';
    import { withStyles } from '@material-ui/core/styles';
    import Fade from "@material-ui/core/Fade";

    const styles = theme => ({
      root: {
        pointerEvents: 'none',
      },
      paper: {
        minWidth: '300px',
        minHeight: '60px',
        padding: theme.spacing.unit * 2,
      },
    });

    class InfoCard extends React.Component {

      render() {
        const { 
          classes, 
          fullName, 
          emailAddress, 
          open, 
          node,
          id,
        } = this.props;

        return(
          <Popper
            id={id}
            open={open} 
            anchorEl={node} 
            placement="left-start"
            modifiers={{
              preventOverflow: {
                enabled: true,
                boundariesElement: 'viewport',
              },
            }}
            transition
          >
            {({ TransitionProps }) => (
              <Fade {...TransitionProps} timeout={350}>
                <Paper className={classes.paper}>
                  <Grid container>
                    <Grid item>
                      {fullName}
                    </Grid>
                    <Grid item>
                      {emailAddress}
                    </Grid>
                    </Grid>
                  </Grid>
                </Paper>
              </Fade>
            )}
          </Popper>
        );
      }
    }

    export default InfoCard;

I am not able to see Popper only. But If I remove the Popper component I can see Paper component. I believe there is a problem with the Popper.

Can you help me, please?

Answer 1

<Popper style={{zIndex:1}} 

Try to update the styles with zIndex as 1 which conflicts with other z-index like Drawer etc.

Answer 2

Are you sure that your popper is actually opening?

You can debug this by setting open={true} in the popper component and seeing what is rendered.

It looks to me like you are passing an undefined variable into your open prop, which would explain why your popper isn't showing. In your container component you have the line: open={openCard}. This should be open={this.state.openCard}.