单击元素时材质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>
  );
}