Использование всплывающей подсказки при наведении и щелчке мышью вызывает проблемы при закрытии всплывающей подсказки

Question

Я могу использовать функции наведения и щелчка отдельно во всплывающей подсказке пользовательского интерфейса материала.

Теперь я хочу использовать обе функции. при наведении курсора всплывающая подсказка должна открыться. Если я нажимаю, всплывающая подсказка должна оставаться открытой, пока я не закрою ее.

Я сделал следующее, чтобы добиться наведения и onclick 1. изначально disableHoverListener имеет значение false, в результате я могу отображать всплывающую подсказку при наведении 2. когда я нажимаю на кнопку, чтобы открыть подсказку, я установил open = true. Всплывающая подсказка остается открытой. Если я попытаюсь закрыть всплывающую подсказку, я могу установить open = false. , но всплывающая подсказка не закрывается, пока я не наведу указатель мыши.

Может ли кто-нибудь помочь мне в решении проблемы

Answer 1

Вот код того, что я понял из вашего описания. Вы хотите, чтобы всплывающая подсказка отображалась при наведении курсора (поведение по умолчанию). Но если сделать его управляемым компонентом. т.е. вы хотите установить значение open 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>
  );