[Popover] Want to implement hover

[hengshanMWC]

Summary

How to implement the hover function of Button + Popover's children? When my mouse is on the Button, the Popover opens, but the Popover occupies the entire screen and the parent element makes the Popover flash continuously.

Examples

Motivation

No response

Search keywords: Popover hover

[aarongarciah]

Hey @hengshanMWC! Please provide a reproduction so we can take a look if you think there's an issue with the Popover component. We have an example in the docs on how to open a Popover on hover: https://mui.com/material-ui/react-popover/#mouse-hover-interaction

[hengshanMWC]

Hey @hengshanMWC! Please provide a reproduction so we can take a look if you think there's an issue with the Popover component. We have an example in the docs on how to open a Popover on hover: https://mui.com/material-ui/react-popover/#mouse-hover-interaction

Hi，Here is a reproducible link@ @aarongarciah
https://codesandbox.io/p/sandbox/laughing-currying-g3vl6l?file=%2Fsrc%2FDemo.js%3A19%2C31

[aarongarciah]

@hengshanMWC may I ask you to explain what are you exactly trying to achieve? What's the specific behavior you want to achieve with the timer in your example?

[hengshanMWC]

@aarongarciah

1. I hope that when I hover over Typography or div, Popover will be displayed.
2. The timer is used to ensure that MouseLeave will not immediately close Popover. If the timer is not used, you will leave Typography or div and it will be closed immediately, which cannot achieve 1.

[hengshanMWC]

Currently, due to Popver's Modal, the mouse keeps flickering when hovering over Typography.

[aarongarciah]

I think you can achieve the desired behavior with some CSS magic, using pointer-events. The idea is to add pointer-events: none to the Popover root element to disable mouse interactions on the elements that cover the whole page. Then, add pointer-events: auto to the Popover paper element so the Popover content is still accessible using the mouse. Here's a working example: https://codesandbox.io/p/sandbox/laughing-currying-g3vl6l

Please, test this thoroughly and make sure this approach meets your project's criteria (especially in terms of accessibility) before considering this a valid approach.

Let me know if this works for you. Cheers.

[hengshanMWC]

@aarongarciah Got it, thanks to you, it was actually a simple CSS problem.https://codesandbox.io/p/sandbox/laughing-currying-g3vl6l?file=%2Fsrc%2FDemo.js%3A34%2C20

[github-actions]

This issue has been closed. If you have a similar problem but not exactly the same, please open a new issue.
Now, if you have additional information related to this issue or things that could help future readers, feel free to leave a comment.

Note

@hengshanMWC How did we do? Your experience with our support team matters to us. If you have a moment, please share your thoughts in this short Support Satisfaction survey.