Issue providing 'click' as both open and close action (with other close action as well)
This is somewhat similar to this issue, which helped me diagnose my issue.
So I want to be able to open a tooltip with a click, but close with either a click or a hover.
- Providing just 'click' works great for opening and closing with click.
- Providing just 'click' for event and 'mouseleave' for data-event-off works great for click -> show, hover-off -> hide
However, while I understand that I should be able to provide multiple events and have it work properly, the menu stops working if I provide 'click mouseleave' for data-event-off and 'click' for event as follows:
<div
data-for={label}
data-tip
data-event-off={'mouseleave click'}>
<div>{displayButton()}</div>
<ReactTooltip
id={label}
event='click'
{...reactTooltipProps}>
{displayTooltip(items)}
</ReactTooltip>
</div>
I think this is because it is probably triggering the open and close events simultaneously, whereas if I just provide 'click' for event, I assume it does some fancy stateful handling behind the scenes to make it open and close using click.
This is reinforced by the fact that it works if I provide a conditional for data-event-off, like data-event-off={open ? 'mouseleave click' : 'mouseleave'}.
The downside is that this requires me to run React.rebuild every time I open or close the tooltip:
React.useEffect(() => {ReactTooltip.rebuild();}, [open]);
The tooltip is set on a row in a table that can have up to 50 rows, so frequently calling ReactTooltip.rebuild() can have a noticeable (~500ms) performance impact on opening / closing the tooltip.
Is there a better way to handle this? Thank you!
And just to be clear, to summarize the issue, I would expect
<ReactTooltip event='click' eventOff='click' />
to work the same as:
<ReactTooltip event='click' />,
but instead it stops the tooltip from opening altogether, presumably because the click is firing both the open and close events at the same time.