材料 UI 工具提示在单击元素时未关闭

Question

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

我正在使用上面链接中的材料 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>
);
}

Answer 2

只需添加关闭和打开

export default function SimpleTooltips() {
const [show, setShow] = React.useState(false)
return (
<div>
<Tooltip 
title="Add" 
aria-label="add" 
open={show} 
onOpen={() => setShow(true)}
onClose={() => setShow(false)}
>
<Button>
<AddIcon onClick={() => setShow(false)}/>
</Button>
</Tooltip>
</div>
);
}