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

[danny-does-stuff]

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

[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.