在我的React应用程序中，我使用了material ui中的popover组件。将鼠标悬停在图标上不会打开弹出窗口

npm install @material-ui/core

import React from 'react';
import { Popover } from '@material-ui/core';

function MyComponent() {
  return (
    <div>
      {/* 在这里放置你的图标 */}
      <Popover
        // 在这里设置Popover的属性
      >
        {/* 在这里放置Popover中的内容 */}
      </Popover>
    </div>
  );
}

export default MyComponent;

import React, { useState } from 'react';
import { Popover, Typography } from '@material-ui/core';

function MyComponent() {
  const [isOpen, setIsOpen] = useState(false);
  const [anchorEl, setAnchorEl] = useState(null);

  const handleMouseEnter = (event) => {
    setIsOpen(true);
    setAnchorEl(event.currentTarget);
  };

  const handleMouseLeave = () => {
    setIsOpen(false);
  };

  return (
    <div>
      <img
        src="icon.png"
        alt="图标"
        onMouseEnter={handleMouseEnter}
        onMouseLeave={handleMouseLeave}
      />
      <Popover
        open={isOpen}
        anchorEl={anchorEl}
        onClose={handleMouseLeave}
      >
        <Typography>这是弹出窗口的内容</Typography>
      </Popover>
    </div>
  );
}

export default MyComponent;