Material UI Popover 仅在点击离开时隐藏答案

【问题标题】：Material UI Popover only hides when clicking awayMaterial UI Popover 仅在点击离开时隐藏
【发布时间】：2022-10-23 17:15:09
【问题描述】：

我需要一些帮助... 我正在使用材质 UI 弹出框：目前，它在将鼠标悬停在某个位置时显示，并且仅在单击远离它的任何位置时才会隐藏。我希望它在我的鼠标不再悬停时自动隐藏。你能告诉我我的代码有什么问题吗？

  const [anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null);
  const openModal = Boolean(anchorEl);
  const id = openModal ? "simple-popover" : undefined;

  const handleClick = (event: any, params: any) => {
    setOrganization({...params});
    setAnchorEl(event.currentTarget);
    console.log("hola", "Hola")
  };

  const handlePopover = () => {
    setAnchorEl(null);
    setOrganization({ idor: null });
  };



        <Grid container direction="column" height="60%">
          <Grid item container justifyContent="center">
            <Badge
              style={{ cursor: "pointer" }}
              badgeContent={params.row.active ? "Active" : "Inactive"}
              color={params.row.active ? "success" : "error"}
              onMouseEnter={(e: any) => handleClick(e, params.row)}
            />
            <Popover
              id={id}
              onExit={handlePopover}
              open={openModal}
              anchorEl={anchorEl}
              onClose={handlePopover}
              anchorOrigin={{
                vertical: "bottom",
                horizontal: "center",
              }}
              transformOrigin={{
                vertical: "top",
                horizontal: "center",
              }}
            >
              <Grid container justifyContent="center">
                <Tooltip title="View Window">
                  <IconButton
                    onClick={() => handleToOrganization(params.row, "view")}
                    style={{ marginLeft: 16 }}
                  >
                    <LaunchOutlinedIcon />
                  </IconButton>
                </Tooltip>
                <Tooltip title="Edit">
                  <IconButton
                    onClick={() => handleToOrganization(params.row, "edit")}
                    style={{ marginLeft: 16 }}
                  >
                    <EditOutlinedIcon />
                  </IconButton>
                </Tooltip>
                <Tooltip title="Delete">
                  <IconButton
                    onClick={() => handleOpen()}
                    style={{ marginLeft: 16 }}
                  >
                    <DeleteOutlineOutlinedIcon />
                  </IconButton>
                </Tooltip>
              </Grid>
            </Popover>
          </Grid>
        </Grid>```

Thank you in advance! :)

【问题讨论】：

标签： material-ui popover

【解决方案1】：

尝试使用 Material UI 中的 Tooltip。一探究竟。 https://mui.com/material-ui/react-tooltip/#customization

【讨论】：