Popover with mouse over interaction needs more specific instruction or a pointer event control property in the api

[akasuv]

At the moment, when you need a hovering popover solution in MUI, you have to set onMouseEnter handler for updating anchor element, and onMouseLeave for setting anchor element to null, the problem is you must set the popover css style pointer-events as none, otherwise when you're hovering an element, the anchor element will be set to this element and then it will immediately trigger onMouseLeave, and the anchor element will be set into null, the popover won't show up ever. The doc just puts some code example in there and doesn't say very clearly about it. It's a very tricky bug when using Popover with hovering.

• The issue is present in the latest release.
• I have searched the issues of this repository and believe that this is not a duplicate.

Current Behavior 😯

Popover component with hovering must set its css style pointer-events into none, otherwise onMouseLeave will trigger immediately, and popover won't show up, and the doc didn't make it very clear.

Expected Behavior 🤔

Provide a property in Popover api for controlling pointer-events, at least make it clear in the doc to let us know we must change pointer-events into none when using Popover with hovering.

Steps to Reproduce 🕹

Here's CodeSandbox Demo

Steps:

1. Import a Popover component
2. Use an element to update popover anchor element with onMouseEnter and onMouseLeave
3. Do not set Popover css style pointer-events to none, keep it default

Your Environment 🌎

System:
    OS: macOS 11.2.3
  Binaries:
    Node: 12.18.2 - ~/.nvm/versions/node/v12.18.2/bin/node
    Yarn: 1.17.0 - /usr/local/bin/yarn
    npm: 7.6.0 - ~/.nvm/versions/node/v12.18.2/bin/npm
  Browsers:
    Chrome: 91.0.4472.77
    Edge: Not Found
    Firefox: Not Found
    Safari: 14.0.3
  npmPackages:
    @material-ui/core: ^4.11.4 => 4.11.4
    @material-ui/icons: ^4.11.2 => 4.11.2
    @material-ui/styles:  4.11.4
    @material-ui/system:  4.11.3
    @material-ui/types:  5.1.0
    @material-ui/utils:  4.11.2
    @types/react: ^17.0.11 => 17.0.11
    react: ^17.0.2 => 17.0.2
    react-dom: ^17.0.2 => 17.0.2
    typescript: ^4.3.2 => 4.3.2

[eps1lon]

Thanks for the feedback.

This is intended behavior of the Popover. It should make the background inert thus triggering a mouseleave event on the trigger.

You probably want to use a Tooltip or Popper.