https://codesandbox.io/s/material-demo-5s4c0?file=/demo.js
I am playing with the material UI tooltip in the above link which has a UI demo. Tooltip is opened on the hover of the button, but it not going away when clicked on the button.is it the default functionality ? just wondering how to make it close when clicked on the button.
any suggestions or help is appreciated.
It's is the default functionality of MUI Tooltip. If you want to close Tooltip when clicking the button, you can try this:
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>
);
}