[FEAT REQ] More options for openOnClick (click, dblclick, mousedown)

[Ciabatos]

Is your feature request related to a problem? Please describe.
I only want to choose openOnClick event listener to ondblclick or onClick or null or onMouseDown with timer to open tooltip

Describe the solution you'd like
Choosing in options one of the mode

Optionally
Could have multiple methods to open one tooltip like onClick and onMouseDown

Describe alternatives you've considered
Making this issue on your own require more event listeners to make in code and its a bit junky

[gabrieljablonski]

Small sidenote to consider for v6.

Deprecating the events prop in favor of openOnClick seemed like a good idea since the only two events were hover and click, and using them together did nothing.

For v6, we should consider two new props: openEvents and closeEvents (or similar names), which the user can choose which events the tooltip will listen to. The default values being openEvents={['mouseenter', 'focus']} and closeEvents={['mouseleave', 'blur']}.

v4 had something kinda similar, but this should be more complete.

[npfisterIT]

For v6, we should consider two new props: openEvents and closeEvents (or similar names), which the user can choose which events the tooltip will listen to. The default values being openEvents={['mouseenter', 'focus']} and closeEvents={['mouseleave', 'blur']}.

Something like closeEvents would be SO helpful. I have a handful of tooltips that need to open on click but also need to close when clicking anywhere (inside or outside the tooltip) but openOnClick only pops up the tooltip for a brief millisecond before closing again. And handling the props with isOpen is inconsistent and hard to figure out (for a noob like myself)

[gabrieljablonski]

openOnClick only pops up the tooltip for a brief millisecond before closing again

That doesn't sound like what should be happening. Are you able to provide a sample showing that behavior?

[npfisterIT]

Sure, here's how it's being used. Sorry for formatting:

<>
<TooltipSpan data-tooltip-id="brand-name" data-tooltip-offset={-4}>
                                        <InfoIcon />
                                    </TooltipSpan>
                                    <TooltipContainer>
                                        <Tooltip
                                            id="brand-name"
                                            place="top"
                                            // isOpen={isOpen.includes("brand-name")}
                                            clickable
                                            openOnClick
                                            render={() => (
                                                <div>
                                                    <h3>Brand Display Name</h3>Name of the brand or mail owner that will
                                                    be displayed in the campaign.
                                                </div>
                                            )}
                                        />
                                    </TooltipContainer>
</>
                                    ```

[gabrieljablonski]

@npfisterIT Using all of the relevant props and attributes from your example, it works just fine:

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

clickable is used when you want the content of the tooltip to be interactable (i.e. it contains a button, an input, ...). If you need to use it, the tooltip will not close when clicking inside of it.

You'll have to provide a sample project. If you do so, please open a new issue so we don't clutter this one.

---

Aside from that, controlling the tooltip isOpen prop should not be that difficult. You just need to have a boolean useState().

https://react-tooltip.com/docs/examples/state

[gabrieljablonski]

[email protected] introduces the new props openEvents, closeEvents, and globalCloseEvents. See docs for more details.