CODEWITHSUNDEEP
javascriptreactjsmaterial-uimaterial-designtooltip
dev0864
dev0864

Reputation: 535

Material ui tool tip not closing when clicked on element

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.

Upvotes: 6

Views: 9179

Answers (2)

fedniko
fedniko

Reputation: 1

just add onClose and onOpen

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

Upvotes: 0

Michael
Michael

Reputation: 1872

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

Upvotes: 9

Related Questions