[BUG] imperativeModeOnly not working as expected

[gabrieljablonski]

Discussed in #1225

^{Originally posted by GabrielMAraujo September 6, 2024}
Hi,

I've been trying to do a custom implementation of the tooltip that requires me to open and close the tooltip programmatically, and it also must not close the tooltip when the mouse hovers out the anchor div.

I read in the docs that the imperativeModeOnly prop should suffice in this case, but I tried to use it and it seems like it's not working.

I made an example in CodeSandbox that shows this behavior (it should open the tooltip and never close it): https://codesandbox.io/p/sandbox/tooltip-forked-gf82hl
Am I doing something wrong, or is this a bug?

---

Seems to be a bug with the imperativeModeOnly prop.

For now, manually clearing the events objects seems to work.

<Tooltip
  content="Hello world!"
  imperativeModeOnly={true}
  openEvents={{}}
  closeEvents={{}}
  globalCloseEvents={{}}
  ref={tooltipRef}
/>

[alsoknownasfoo]

I ran into a similar problem but I also have clickable=true because of the inclusion of buttons in the tooltip content. A workaround for me was settting an openEvents prop to true to prevent the tip from automatically dismissing on a mouseleave event.

openEvents={{
  dblclick: true,
}}

I believe the problem could be attributed to this code here:

react-tooltip/src/components/Tooltip/Tooltip.tsx

Lines 584 to 589 in 08bfc6f

	if (clickable && !hasClickEvent) {
	// used to keep the tooltip open when hovering content.
	// not needed if using click events.
	tooltipRef.current?.addEventListener('mouseenter', handleMouseEnterTooltip)
	tooltipRef.current?.addEventListener('mouseleave', handleMouseLeaveTooltip)
	}

Does the line need to consider imperative mode as well?

(clickable && !hasClickEvent && !imperativeModeOnly)

[MadWagon]

I ran into a similar problem but I also have clickable=true because of the inclusion of buttons in the tooltip content. A workaround for me was settting an openEvents prop to true to prevent the tip from automatically dismissing on a mouseleave event.

openEvents={{
  dblclick: true,
}}

I believe the problem could be attributed to this code here:

react-tooltip/src/components/Tooltip/Tooltip.tsx

Lines 584 to 589 in 08bfc6f

	if (clickable && !hasClickEvent) {
	// used to keep the tooltip open when hovering content.
	// not needed if using click events.
	tooltipRef.current?.addEventListener('mouseenter', handleMouseEnterTooltip)
	tooltipRef.current?.addEventListener('mouseleave', handleMouseLeaveTooltip)
	}

Does the line need to consider imperative mode as well?

(clickable && !hasClickEvent && !imperativeModeOnly)

Thanks for the clever workaround !

[github-actions]

This issue is stale because it has not seen activity in 30 days. Remove the stale label or comment within 14 days, or it will be closed.

[gabrieljablonski]

Sorry for the long delay.

This has been fixed in v5.28.1