Close tooltip when clicking again on it in React

user_14806154 0
Viewed 1431

I have created a tooltip that is opened when a button is clicked.

It should be closed when the button is clicked again but it seem to not work, it only closes when it is clicked somewhere outside.

This is the code:

import React, { useState } from 'react';
import Tooltip from '@material-ui/core/Tooltip';
import ClickAwayListener from '@material-ui/core/ClickAwayListener';
import Button from '@material-ui/core/Button';

const MyClass = () => {
  const [open, setOpen] = useState(false);

  const handleTooltipClose = () => {
    setOpen(false);
  };

  const handleTooltipOpen = () => {
    setOpen(true);
  };

  return (
    <React.Fragment>
      <ClickAwayListener onClickAway={handleTooltipClose}>
        <div>
          <Tooltip
            PopperProps={{
              disablePortal: true
            }}
            onClose={handleTooltipClose}
            open={open}
            disableFocusListener
            disableHoverListener
            disableTouchListener
            title="Add">
            <Button onClick={handleTooltipOpen}>Click</Button>
          </Tooltip>
        </div>
      </ClickAwayListener>
    </React.Fragment>
  );
};

export default MyClass;
react-hooks reactjs tooltip javascript
3 Answers

Make sure to use stopPropagation and preventDefault when having a button with childs

const handleTooltipClose = (e) => {
  e.stopPropagation();
  e.preventDefault();
  setOpen(false);
};

const handleTooltipOpen = (e) => {
  e.stopPropagation();
  e.preventDefault();
  setOpen(true);
};

The event continues to propagate as usual, unless one of its event listeners calls stopPropagation() or stopImmediatePropagation(), either of which terminates propagation at once.

user_49123290

just rewrite your handleTooltipOpen function a little bit like this:

const handleTooltipOpen = () => {
          if( open ){
            setOpen(false);
          }else{
             setOpen(true)
          }
 };
user_141360250

So the button should not open the tooltip but toggle it. The button could trigger a toggleTooltip function

<Button onClick={toggleTooltip}>Click</Button>

and the toggleTooltip function would look like

const toggleTooltip= () => {
    setOpen(!open);
  };

which sets the open state to the opposite of what it currently is.

user_111666170
Related