[BUG] anchor element does not close the tooltip on click

[danny-does-stuff]

Bug description
When using the openOnClick prop, clicking on the anchor element opens the tooltip, but clicking the button does not close the tooltip.

Version of Package
v5.26.3

To Reproduce
Create button as the anchor element, followed by a <Tooltip> with the prop openOnClick

Expected behavior
When the tooltip can be opened by clicking on the anchor element, I would expect to be able to close the tooltip by clicking the anchor element as well. I would still want to be able to close the tooltip by clicking anywhere else on the screen as well.

Desktop:

• OS: MacOS
• Browser: Arc (chromium)
• Version: 1.36.0 (latest)
• Frameworks React 18 (create-react-app)

Additional context
I got the same behavior by using different variations of openEvents and closeEvents. I could not get the desired behavior

[danny-does-stuff]

Resolved! The main problem was that my button only had an SVG icon inside, so the click to close the tooltip was getting captured by the SVG. I fixed that by just adding pointer-events: none; to the SVG. Closing the tooltip works fine if the child of the button is just some text. I don't know whether there's anything react-tooltip can do to fix this issue with SVGs.

To get close on click to work, you have to use the props openOnClick and closeEvents={{ click: true }}. Here is a code sandbox

[gabrieljablonski]

The intended behavior for openOnClick is for it to just open on click. When using just that prop, the tooltip will only close when clicking outside the anchor.

The correct way to achieve the behavior you want, as you've pointed out, is to use openEvents={{ click: true }} (or simply openOnClick, though openEvents is preferred in this case) alongside closeEvents={{ click: true }}.

This name for openOnClick might be a little misleading, so we'll consider updating the docs to explain that.

Now for the behavior with an SVG, we'll take a look at it later and see if there's anything viable we can do directly with the tooltip.

[gabrieljablonski]

Apparently it's a known issue with using SVGs.

c7f865f adds a section on the troubleshooting page about it. Should be live on the docs soon.

[rodrigofsouto]

@gabrieljablonski @rodrigofsouto

I think it's more than that... it seems the click event is not propagating to the tooltip container.

Here is my Tooltip definition:

<Tooltip openEvents={{focus:true, mouseenter:true}} 
      closeEvents={{blur:true, mouseleave:true, click:true}} 
      id='mytt'/>

If I have a <MyButton /> component that returns something like this:

<div id='wrapper' data-tooltip-id='mytt' data-tooltip-content='testing...'>  
  <button id='button' type='button'>
    <span id='text'>Click here!</span>
  </button>
</div>

The click event on the MyButton component does not close the tooltip. Even if I move data-tooltip-id and data-tooltip-content to the button element, it still doesn't work. It only works if I move them to the text element.

[ru13r]

Apparently it's a known issue with using SVGs.

c7f865f adds a section on the troubleshooting page about it. Should be live on the docs soon.

Had exactly the same setup with SVG icons.
Can we add up the link to this troubleshooting section in the events section of docs? It is not quite obvious.