[material-ui][Popover] How to create a hover card using a popover?

[svidskiy]

The problem in depth

The documentation includes an example of implementing a hover card using a popover, but it is flawed in that the card disappears when hovered over. How can it be implemented so that it remains visible?

export const HoverCard = ({ children }: HoverCardProps) => {
    const [anchorEl, setAnchorEl] = useState<null | HTMLDivElement>(null);

    const handleMouseEnter = (event: MouseEvent<HTMLDivElement>) => setAnchorEl(event.currentTarget);

    const handleMouseLeave = () => setAnchorEl(null);

    return (
        <>
            <Box onMouseEnter={handleMouseEnter} onMouseLeave={handleMouseLeave}>
                {children}
            </Box>

            <Popover
                open={Boolean(anchorEl)}
                anchorEl={anchorEl}
                sx={{
                    pointerEvents: 'none'
                }}
            >
                Content
            </Popover>
        </>
    );
};

Your environment

`npx @mui/envinfo`

  System:
    OS: Windows 11 10.0.22631
  Binaries:
    Node: 18.18.0 - C:\Program Files\nodejs\node.EXE
    npm: 10.5.2 - C:\Program Files\nodejs\npm.CMD
    pnpm: 9.6.0 - C:\Program Files\nodejs\pnpm.CMD
  Browsers:
    Chrome: Not Found
    Edge: Chromium (127.0.2651.74)
  npmPackages:
    @emotion/react: ^11.11.4 => 11.11.4 
    @emotion/styled: ^11.11.5 => 11.11.5 
    @mui/base:  5.0.0-beta.40 
    @mui/core-downloads-tracker:  5.15.17 
    @mui/icons-material: ^5.15.17 => 5.15.17 
    @mui/lab: ^5.0.0-alpha.170 => 5.0.0-alpha.170 
    @mui/material: ^5.15.17 => 5.15.17 
    @mui/private-theming:  5.15.14 
    @mui/styled-engine:  5.15.14 
    @mui/system:  5.15.15 
    @mui/types:  7.2.14
    @mui/utils:  5.15.14
    @mui/x-charts: ^7.3.2 => 7.3.2
    @mui/x-data-grid:  7.3.2
    @mui/x-data-grid-generator: ^6.20.0 => 6.20.0
    @mui/x-data-grid-premium:  6.20.0
    @mui/x-data-grid-pro: ^7.3.2 => 7.3.2
    @mui/x-date-pickers: ^7.4.0 => 7.4.0
    @mui/x-date-pickers-pro: ^7.4.0 => 7.4.0
    @mui/x-license:  7.2.0
    @mui/x-license-pro:  6.10.2
    @types/react: ^18.2.66 => 18.2.79
    react: ^18.2.0 => 18.2.0
    react-dom: ^18.2.0 => 18.2.0
    typescript: ^5.2.2 => 5.4.5

Search keywords: popover
Order ID: 89766

Search keywords:

[ZeeshanTamboli]

I don't think it is flawed. For this advanced case, you'll need to use material-ui-popup-state, as recommended in the docs. Here's a working example: https://stackblitz.com/edit/react-pifkmh?file=Demo.tsx.

Also, the hover example text incorrectly says "using mouseover event," but it actually uses mouseenter. I'll create a PR to correct that.

[svidskiy]

I don't think it is flawed. For this advanced case, you'll need to use material-ui-popup-state, as recommended in the docs. Here's a working example: https://stackblitz.com/edit/react-pifkmh?file=Demo.tsx.

Also, the hover example text incorrectly says "using mouseover event," but it actually uses mouseenter. I'll create a PR to correct that.

What do you mean by using MouseEnter instead of MouseOver? Where did you see this? Thanks.

[ZeeshanTamboli]

I don't think it is flawed. For this advanced case, you'll need to use material-ui-popup-state, as recommended in the docs. Here's a working example: https://stackblitz.com/edit/react-pifkmh?file=Demo.tsx.
Also, the hover example text incorrectly says "using mouseover event," but it actually uses mouseenter. I'll create a PR to correct that.

What do you mean by using MouseEnter instead of MouseOver? Where did you see this? Thanks.

In the demo, the hover behavior is triggered by the onMouseEnter event, not onMouseOver. The example incorrectly mentions mouseover. I’ve created PR #43290 to correct this.