Tooltip hides/shows too quickly when trying to click on button inside [BUG]

[rgoldstein22]

Bug description If you have two elements on the page right next to each other on the page that both have a tooltip (share the same one in this instance), and they have clickable elements inside them, when you try to move your mouse into the tooltip to click the button, it closes the first tooltip and opens the tooltip associated to the element below the first tooltip.

I have tried adding delayHide and delayShow to prevent the Tooltip from closing too quickly, but doesn't work.

Also, you can sometimes get into the tooltip for the button, but you have to be REAL quick. Normal movement doesn't allow it.

See screen grab for better idea.

Version of Package v5.26.4

To Reproduce

• Have multiple elements next to/on top of each other that have tooltip
• Hover on first element
• Then try to move mouse to button inside tooltip

Expected behavior I would expect to be able to move mouse into open tooltip and be able to click button without tooltip closing

Screenshots

Desktop (please complete the following information if possible or delete this section):

• OS: Sonoma 14.5
• Browser Chrome
• Version 126.0.6478.127
• Frameworks React 18

Smartphone (please complete the following information if possible or delete this section):

• Device: [e.g. iPhone6]
• OS: [e.g. iOS8.1]
• Browser [e.g. stock browser, safari]
• Version [e.g. 22]
• Frameworks [e.g. React 18, Next.js 13]

Additional context Add any other context about the problem here.

[gabrieljablonski]

I would not consider this a bug on the tooltip, it is working as expected.

Since the tooltip doesn't fully cover the other elements behind it, when you try to move the mouse inside the tooltip, you're hovering another anchor element, which triggers the tooltip on this element.

As you've seen, delayHide won't help with this.

I have two suggestions you can try:

1. Make the tooltip bigger so it fully covers the other elements (it might also help to make your elements more spaced apart, if your design allows for it)
2. Add a negative margin to the tooltip. This will keep the tooltip the same size visually, but will "capture" the mouse hover on a wider region

You'll have to test and see what works best for you, not sure if there's anything we can do internally with the tooltip to help with that, without breaking other functionality.

[rgoldstein22]

Thanks for the quick response.. Yes moving up the tooltip seems to have work. Closing.