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

Question

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

我正在使用上面链接中的材质 UI 工具提示，其中有一个 UI 演示。工具提示在按钮悬停时打开，但单击按钮时它不会消失。这是默认功能吗？只是想知道如何在单击按钮时关闭它。

任何建议或帮助表示赞赏。

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>
  );
}