Nested elements with tooltip

[XDSeverussnape]

Hi!

I have nested elements with tooltips

but when I move cursor from child DOM element to parent, tooltip data doesn't change

this is how it looks: https://prnt.sc/10h83bt

reproducible demo: https://codesandbox.io/p/sandbox/react-tooltip-issue-y867xh?file=%2Fsrc%2FApp.js%3A6%2C32

is there a way to solve this?

[gabrieljablonski]

#1194 switches over the default events watched on the anchor to mouseover and mouseout, which works best with nested anchor elements.

You can try it out with react-tooltip@5.26.4-beta.1194.rc.1 until we get an official release out. Here's your example updated to the new version (also slightly adjusted).

Let us know if that fixes the problem for you. This issue will be closed once the PR gets merged, so please leave it open for now if it does fix it.

[XDSeverussnape]

I cant open: example updated.
And i don't understand how i can change mouseenter and mouseleave to mouseover and mouseout?

[gabrieljablonski]

@XDSeverussnape sorry for the delay.

You should be able to open the updated example now, CodeSandbox used to create the sandboxes as public by default, I think they changed that and I didn't notice😅

And i don't understand how i can change mouseenter and mouseleave to mouseover and mouseout?

You don't need to change anything. This beta version (and the future release) switches over the default events from the previous mouseenter/mouseleave to mouseover/mouseout.

The tooltip component has the openEvents and closeEvents props you can use to select which events you want to use, but for your use case, you can leave them with the default values.

[XDSeverussnape]

This solution works for me. Thank you very much for your help and quick response. We managed to solve an important issue in my project in a very short time. Thank you.

[gabrieljablonski]

Great to hear! You'll get a notification once we close this and publish an official release so you can upgrade, but the beta version should work fine until then, so don't worry about it.

[gabrieljablonski]

Fixed with react-tooltip@5.27.0

https://github.com/ReactTooltip/react-tooltip/releases/tag/v5.27.0