Using hover and click in materia ui ToolTip causes issues in closing the tooltip

Question

I am able to use hover and click functionality separately in material ui Tooltip.

Now i want following functionality using both. when i hover the tooltip should open. If i click the tooltip should remain open unless i close it.

I have done following to achive hover and onclick 1. initially disableHoverListener is false as a result am able to show tooltip on hover 2. when i click on the button to open the tool tip i set open = true. The tooltip remains open. If i try to close the tool tip am able to set the open = false. but the tooltip doesnot close until i move the mouse.

Can someone guide me in solving the problem

Answer 1

Here is the code for whatever I could understand from your description. You want the tooltip to show on hover (default behaviour). But if you make it controlled component. ie you want to set open true on click and false otherwise the default behaviour won't work.

Working Example: CodeSandbox

Here's code hope it helped.

const [show, setShow] = React.useState(false);

  const handleClick = () => {
    if (show) {
      setShow(false);
    } else {
      setShow(true);
    }
  };

  return (
    <div
      style={{ display: "inline" }}
      onMouseOver={() => setShow(true)}
      onMouseLeave={() => setShow(false)}
    >
      <Tooltip title="You want to see me!" open={show} onClick={handleClick}>
        <IconButton aria-label="delete">
          <DeleteIcon />
        </IconButton>
      </Tooltip>
    </div>
  );