MUI Popover - How to start transition from mouse position? - material-ui

Question

I want a Material UI Popover to open/close on mouse press, with the opening transition starting from the location of the mouse when the mouse was pressed. How do I do this?

Answer 1

You need to set anchorReference to anchorPosition and then use the mouse coordinate for anchor position. So you will need to manage mouse position using state:
const [mouseX, setMouseX] = useState();
const [mouseY, setMouseY] = useState();
then in your click handler set the states:
const handleClick = (event) => {
setAnchorEl(event.currentTarget);
setMouseX(event.clientX);
setMouseY(event.clientY);
}
and finally in your jsx use mouse position in anchorPosition:
return (
<div>
<Button aria-describedby={id} variant="contained" onClick={handleClick}>
Open Popover
</Button>
<Popover
id={id}
anchorReference="anchorPosition"
anchorPosition={{ top: mouseY, left: mouseX }}
open={open}
onClose={handleClose}
anchorOrigin={{
vertical: "top",
horizontal: "left",
}}
>
<Typography sx={{ p: 2 }}>The content of the Popover.</Typography>
</Popover>
</div>
);