title: Material ui popover how to anchor to another element (different from event target)
body: <p>Well typically when we use popover we set the anchor during a mouse event to <code>event.currentTarget</code>.</p>
  
  <p>However this is impossible in certain situations and undesired in others. - How can I set the popover anchor element directly?</p>
  
  <pre><code>import React from "react";
  import Popover from "@material-ui/core/Popover";
  import Typography from "@material-ui/core/Typography";
  import Button from "@material-ui/core/Button";
  
  export default function SimplePopover() {
    const [anchorEl, setAnchorEl] = React.useState(null);
  
    function handleClick(event) {
      //setAnchorEl(event.currentTarget);
      setAnchorEl(); //How to refer to the div?
    }
  
    function handleClose() {
      setAnchorEl(null);
    }
  
    const open = Boolean(anchorEl);
    const id = open ? "simple-popover" : undefined;
  
    return (
      &lt;div&gt;
        &lt;Typography&gt;Anchor point of popover here&lt;/Typography&gt;
        &lt;Button aria-describedby={id} variant="contained" onClick={handleClick}&gt;
          Open Popover
        &lt;/Button&gt;
        &lt;Popover
          id={id}
          open={open}
          anchorEl={anchorEl}
          onClose={handleClose}
          anchorOrigin={{
            vertical: "bottom",
            horizontal: "center"
          }}
          transformOrigin={{
            vertical: "top",
            horizontal: "center"
          }}
        &gt;
          &lt;Typography&gt;The content of the Popover.&lt;/Typography&gt;
        &lt;/Popover&gt;
      &lt;/div&gt;
    );
  }
  </code></pre>
  
  <p><a href="https://codesandbox.io/s/material-demo-1fbgf" rel="noreferrer">demo</a></p>