React-tooltip: Hide a tooltip only on click outside it

[pokidovea]

Is there ability to hide a tooltip only on click outside it? globalEventOff='click' works both for click inside and outside the tooltip.

[wwayne]

Hmm no such ability at the moment, so you have a tooltip that you don't want to hide it when you click on it but hiding it when you click outside?

[pokidovea]

Maybe it is unusual behaviour, but I have such requirements: a tooltip can be closed by clicking outside it or by clicking on cross in the corner. However, I've found a simple workaround. I suppress propagation of click event on tooltip. So it is not necessary to add this behaviour to the lib. I just asked about a true way.

[wwayne]

Okay, closing the issue

[oyeanuj]

@pokidovea In the same boat, wondering how you ended up solving for this usecase? Any examples or snippets would be much appreciated!

[antofa]

@wwayne is there any solutioun for this situation? (close tooltip by clicking on cross in the corner)

[huumanoid]

@antofa according to the proposition of pokidovea, you should suppress propagation of click event from tooltip.

<ReactTooltip className="foobar" globalEventOff="click" />

for (const tooltip of document.querySelectorAll('.foobar')) {
  tooltip.addEventListener('click', (e) => e.stopPropagation())
}

May be this solution is ugly, we are working on appropriate alternative for such cases, but don't count on it, I'm too busy right now, I'm sorry.

[antofa]

@huumanoid thx for your fast reply. It's helped me.

[giedriusvickus]

Solution proposed by @huumanoid doesn't really work, if you have something clickable inside tooltip. Is there a way, to add overlay under the tooltip, for it to act as closing target?

[shehrozsheikh]

I optimized @huumanoid solution and it worked for me, I added a div wrapper inside my ReactToolTip component and added this onClick={e => e.stopPropagation()} on that wrapper.