在材质 ui ToolTip 中使用悬停并单击会导致关闭工具提示出现问题

Question

我可以在 Material ui Tooltip 中分别使用悬停和点击功能。

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

我已完成以下操作以实现悬停和点击 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>
  );