[BUG] imperativeModeOnly not working as expected

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}
/>

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)

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 !

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.

Sorry for the long delay.

This has been fixed in v5.28.1

Navigation Menu

Repository navigation

[BUG] `imperativeModeOnly` not working as expected #1226

Discussed in #1225

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

	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)
	}

[BUG] imperativeModeOnly not working as expected #1226

Description

Discussed in #1225

Activity

alsoknownasfoo commented on Nov 1, 2024

MadWagon commented on Dec 24, 2024

github-actions commented on Mar 25, 2025

gabrieljablonski commented on Apr 8, 2025

Metadata

Metadata

Assignees

Labels

Type

Projects

Milestone

Relationships

Development

Issue actions

[BUG] `imperativeModeOnly` not working as expected #1226