score:1

Accepted answer

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.

score:1

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.

score:1

just rewrite your handletooltipopen function a little bit like this:

const handletooltipopen = () => {
          if( open ){
            setopen(false);
          }else{
             setopen(true)
          }
 };

Related Query

More Query from same tag