Material ui 单击元素时工具提示未关闭

Question

https://codesandbox.io/s/material-demo-5s4c0?file=/demo.js

我正在玩上面 link 中的 material UI 工具提示，其中有一个 UI 演示。工具提示在按钮悬停时打开，但在单击 button.is 时它不会消失，它是默认功能吗？只是想知道如何在单击按钮时关闭它。

如有任何建议或帮助，我们将不胜感激。

Answer 1

这是 MUI Tooltip 的默认功能。如果你想在点击按钮时关闭Tooltip，你可以试试这个：

export default function SimpleTooltips() {
  const classes = useStyles();
  const [show, setShow] = React.useState(false)

  return (
    <div>
      <Tooltip 
        title="Add" 
        aria-label="add" 
        open={show} 
        disableHoverListener
        onMouseEnter={() => setShow(true)}
        onMouseLeave={() => setShow(false)}
      >
        <Fab color="primary" className={classes.fab}>
          <AddIcon onClick={() => setShow(false)}/>
        </Fab>
      </Tooltip>
    </div>
  );
}