以编程方式在 Material-UI 中打开工具提示

我需要能够向元素添加工具提示，以便它像正常一样运行（当元素悬停时打开），同时我需要能够以编程方式打开它。

我知道它有openprop 允许这样做，但在这种情况下，我会将组件从不受控制切换到受控制，这是不可能的。

我也无法总结:hover工具提示内按钮上的事件，因为这在浏览器中是不可能的。

有没有办法通过参考来完成这个任务？当我将 ref 与工具提示一起使用时，它只是传递给子元素。

Thanks!

当。。。的时候Tooltip被控制时，onOpen https://github.com/mui-org/material-ui/blob/v4.5.0/packages/material-ui/src/Tooltip/Tooltip.js#L194 and onClose https://github.com/mui-org/material-ui/blob/v4.5.0/packages/material-ui/src/Tooltip/Tooltip.js#L262在不受控制的情况下打开/关闭工具提示时，函数仍然会触发。您可以使用这些功能来更改控制状态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);