Программно открыть подсказку в Material-UI

Question

Мне нужно иметь возможность добавить всплывающую подсказку к элементу, чтобы она работала как обычно (открывается при наведении на элемент), и в то же время мне нужна возможность открывать ее программным способом.

IЯ знаю, что у него есть open опора, которая позволяет это делать, но в этом случае я буду переключать компонент с неуправляемого на управляемый, а это невозможно.

Я также не могу суммировать событие :hoverна кнопку внутри всплывающей подсказки, потому что это невозможно в браузере.

Есть ли способ сделать это, возможно, через ссылки? Когда я использую ref с всплывающей подсказкой, он просто передается дочернему элементу.

Спасибо!

Answer 1

Когда контролируется Tooltip, функции onOpen и onClose будут по-прежнему срабатывать в те моменты, когда он будет открывать / закрывать подсказку в неконтролируемом случае. Вы можете использовать эти функции для изменения контролируемого состояния Tooltip.

Рабочий пример:

import React from "react";
import ReactDOM from "react-dom";

import Tooltip from "@material-ui/core/Tooltip";
import Button from "@material-ui/core/Button";

function App() {
  const [tooltipIsOpen, setTooltipIsOpen] = React.useState(false);
  return (
    <div className="App">
      <Tooltip
        open={tooltipIsOpen}
        onOpen={() => setTooltipIsOpen(true)}
        onClose={() => setTooltipIsOpen(false)}
        title="I'm a controlled tooltip"
      >
        <span>Hover over me or click the button</span>
      </Tooltip>
      <div style={{ marginTop: 50 }}>
        <Button
          onClick={() => setTooltipIsOpen(!tooltipIsOpen)}
          variant="contained"
          color="primary"
        >
          Click me to {tooltipIsOpen ? "close" : "open"} the tooltip
        </Button>
      </div>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);