'material-ui Tooltip throws an error on hover

I'm using the demo example in my application, just to check if it works:

ArrowTooltip.js

import React from 'react';
import { any, node } from 'prop-types';
import Tooltip from '@material-ui/core/Tooltip';
import { makeStyles } from '@material-ui/styles';

function arrowGenerator(color) {
  return {
    '&[x-placement*="bottom"] $arrow': {
      top: 0,
      left: 0,
      marginTop: '-0.95em',
      width: '2em',
      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: '2em',
      height: '1em',
      '&::before': {
        borderWidth: '1em 1em 0 1em',
        borderColor: `${color} transparent transparent transparent`,
      },
    },
    '&[x-placement*="right"] $arrow': {
      left: 0,
      marginLeft: '-0.95em',
      height: '2em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 1em 1em 0',
        borderColor: `transparent ${color} transparent transparent`,
      },
    },
    '&[x-placement*="left"] $arrow': {
      right: 0,
      marginRight: '-0.95em',
      height: '2em',
      width: '1em',
      '&::before': {
        borderWidth: '1em 0 1em 1em',
        borderColor: `transparent transparent transparent ${color}`,
      },
    },
  };
}

const useStylesArrow = makeStyles(theme => ({
  tooltip: {
    position: 'relative',
  },
  arrow: {
    position: 'absolute',
    fontSize: 6,
    '&::before': {
      content: '""',
      margin: 'auto',
      display: 'block',
      width: 0,
      height: 0,
      borderStyle: 'solid',
    },
  },
  popper: arrowGenerator(theme.palette.grey[700]),
}));

export function ArrowTooltip(props) {
  const { arrow, ...classes } = useStylesArrow();
  const [arrowRef, setArrowRef] = React.useState(null);

  return (
    <Tooltip
      classes={classes}
      PopperProps={{
        popperOptions: {
          modifiers: {
            arrow: {
              enabled: Boolean(arrowRef),
              element: arrowRef,
            },
          },
        },
      }}
      {...props}
      title={
        <React.Fragment>
          {props.title}
          <span className={arrow} ref={setArrowRef} />
        </React.Fragment>
      }
    >{props.children}</Tooltip>
  );
}

ArrowTooltip.propTypes = {
  title: node,
  children: node,
  anchorEl: any,
};

export default ArrowTooltip;

myComponent.js:

const statusText = (
  <div>
    <Typography
      variant="label"
      className={classNames(classes[colorClassName])}
    >
      <FormattedMessage id={`app.order.status.${componentStatus}`} />
    </Typography>
  </div>
);

return (
  <Grid container alignItems="center" justify="flex-end">
    {isError ? (
      <ArrowTooltip
        title={getFailureMessage(status, sendingState)}
      >
        {statusText}
      </ArrowTooltip>
    ) : statusText}
  </Grid>
)

The page displays properly, but when there is an error and I hover the statusText everything disappears and I get this error:

Uncaught TypeError: popper_js__WEBPACK_IMPORTED_MODULE_4__.default is not a constructor
    at Popper.js:116
    at Popper.js:133
    at commitAttachRef (react-dom.development.js:20219)
    at commitLayoutEffects (react-dom.development.js:22818)
    at HTMLUnknownElement.callCallback (react-dom.development.js:347)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:397)
    at invokeGuardedCallback (react-dom.development.js:454)
    at commitRootImpl (react-dom.development.js:22585)
    at unstable_runWithPriority (scheduler.development.js:643)
    at runWithPriority$2 (react-dom.development.js:11305)

I would appreciate any tips how to fix it...

    "@material-ui/core": "^4.4.2",
    "@material-ui/icons": "^4.4.1",
    "@material-ui/styles": "^4.4.1",
    "react": "^16.9.0",
    "react-dom": "^16.9.0",

Solution 1:^[1]

We had a similar problem and eventually tracked it down to conflicting dependencies (one from Storybook, one from MaterialUI) which installed both the old popper.js and its replacement, @popperjs/core. Apparently these cannot coexist, at least on Windows where a search for popper.js can match the file Popper.js. Unfortunately we could not find a good solution.

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1	JohnT

'material-ui Tooltip throws an error on hover

Solution 1:[1]

Sources

Related Questions

Solution 1:^[1]