在 materia ui ToolTip 中使用悬停和单击会导致关闭工具提示时出现问题

Question

我可以在 Material ui Tooltip 中单独使用悬停和单击功能。

现在我想要使用两者来实现以下功能。当我悬停时，工具提示应该打开。如果我单击工具提示应保持打开状态，除非我关闭它。

我已完成以下操作以实现悬停和 onclick 1。最初，disableHoverListener 为 false，因此我能够在悬停时显示工具提示 2。当我单击按钮打开工具提示时，我设置 open = true。工具提示保持打开状态。如果我尝试关闭工具提示，我可以设置 open = false。但在我移动鼠标之前，工具提示不会关闭。

有人可以指导我解决问题吗

Answer 1

这是我从您的描述中可以理解的任何内容的代码。您希望工具提示在悬停时显示（默认行为）。但如果你让它成为受控组件。即您想在单击时设置打开 true 和 false，否则默认行为将不起作用。

工作示例：CodeSandbox

这是代码希望有帮助。

const [show, setShow] = React.useState(false);

  const handleClick = () => {
    if (show) {
      setShow(false);
    } else {
      setShow(true);
    }
  };

  return (
    <div
      style={{ display: "inline" }}
      onMouseOver={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <Tooltip title="You want to see me!" open={show} onClick={handleClick}>
        <IconButton aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );