react-tooltip icon indicating copy to clipboard operation
react-tooltip copied to clipboard

Issue providing 'click' as both open and close action (with other close action as well)

Open chimak-dnb opened this issue 4 years ago • 1 comments

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.

  1. Providing just 'click' works great for opening and closing with click.
  2. 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!

chimak-dnb avatar Oct 05 '21 15:10 chimak-dnb

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.

chimak-dnb avatar Oct 05 '21 16:10 chimak-dnb