Click outside behaviour?

[ricardo-fnd]

Hi devs! I went on the docs, issues and PRs, and can't find a reference to this, therefore I'm creating this discussion.
Is there a way to close the tooltip, when clicking outside of it?

Thanks.

[ricardo-fnd]

I actually found this using click where it says Clicking anywhere outside the anchor element will close the tooltip. but this is deprecated.

[gabrieljablonski]

Hi @ricardo-fnd.

Whenever you run into deprecation warnings, you often will find more info on how to proceed close by.

Is openOnClick what you're looking for?

[gabrieljablonski]

It does in fact close the tooltip when clicking outside the anchor.

https://stackblitz.com/edit/stackblitz-starters-8lx6xg?file=src%2FApp.tsx

Maybe you're expecting the tooltip to close when clicking the anchor a second time, but that's not the default behavior. If that's the case you'll have to control isOpen manually. Check the docs for more info on how to achieve that.

If that's not what's happening, you'll have to provide a more detailed example.

[ricardo-fnd]

I found out that when isOpen is true clicking outside doesn't work, which makes sense.
I have a problem here. I have 30 divs which I am rendering inside a .map().

When clicking in one of those divs, its children changes, and I want the tooltip to render right away, that why isOpen is true

<div id={`tooltip-${arr.id}`} onClick={() => setActive(arr.id)}>
    {isActive ? (
        <>
            <Tooltip openOnClick clickable isOpen anchorSelect={`tooltip-${arr.id}`}>
                <p>this is a tooltip</p>
             </Tooltip>
             <div>this is the active div</div>
        </>
    ) : (
          <div>this is a div</div>
    )}
</div>

Any suggestions to close the tooltip when clicking outside? Thanks @gabrieljablonski

[gabrieljablonski]

Have a look at this issue.

You may be able to control the tooltip target this way. Remember to use the key prop to make sure the tooltip gets re-rendered.

Even if in your use case you're not actually rendering the 30 tooltips at the same time, rendering them conditionally is probably not a good idea.

Try the example from the issue, placing the tooltip where it will always be on the DOM.

[gabrieljablonski]

As for closing the tooltip when clicking outside, you'll have to control the isOpen prop manually, and add an event listener to your divs to know when you've clicked outside them.

You should be able to find a generic solution to this by searching for "click outside event javascript" or something similar.

[ricardo-fnd]

So now its solved. I was able to render the tooltip only once (outside the .map()) and without any condition, making the isOpen prop the source of truth.

As I am controlling the tooltip manually by passing isOpen as a prop, I had to close the tooltip also manually. (Luckily I had already that implementation useOnClickOutside)

You might want to add that in the documentation. Passing isOpen as a prop, will disable click outside behaviour, which again, makes sense but it's not the first thing that comes to mind.

thanks once again @gabrieljablonski