How to enable onHover behaviour for tooltip children (like in v4)?

[darya-talanina]

Hello.

I'm currently migrating a project to react-tooltip 5.3.2 from a 4.* version.
I struggle with keeping some existing behaviour detailed below. Would anyone be able to point to the right place in the docs / source code so that I have an idea of how to implement this?
Thank you.

• there's a tooltip that appears after one of several elements is clicked (✅ works as expected with version 5.3.2 and TooltipWrapper)
• inside the tooltip there's a button that changes appearance on hover (❌ doesn't work) and can be clicked (❌ doesn't work), see attached gifs for before/now behaviour. 👉 This is the most important part I need to implement. It was previously achieved with clickable prop if I remember correctly.

Now (v5):

mouseover-5.mp4

Before (v4):

mouseover-4.mp4

• tooltip can be closed when re-clicking its anchor (✅ works as expected) and CANNOT be closed when clicking anywhere else (❌ doesn't work)
• upon scrolling the page, the tooltip remains "in place" and doesn't get scrolled with the rest of the page (❌ doesn't work, setting data-scroll-hide={false} on TooltipWrapper doesn't seem to do anything)

[gabrieljablonski]

Hey Darya. Thanks for the in-depth explanations, it helps immensely when figuring out the problem.

inside the tooltip there's a button that changes appearance on hover (❌ doesn't work) and can be clicked (❌ doesn't work), see attached gifs for before/now behaviour. 👉 This is the most important part I need to implement. It was previously achieved with clickable prop if I remember correctly.

We'll probably be addind v4's clickable prop soon, but as a workaround, you can set pointer-events to auto manually through CSS, either by setting className on the <Tooltip /> element and editing your .css files, or through the style prop.

<Tooltip style={{ pointerEvents: 'auto' }} />

tooltip can be closed when re-clicking its anchor (✅ works as expected) and CANNOT be closed when clicking anywhere else (❌ doesn't work)

Are you controlling the tooltip state manually with isOpen and setIsOpen? If you check the click example in the docs, you'll see the default behavior is the following:

• Clicking the anchor element (the cat's face in the example) does nothing if the tooltip is already open.
• Clicking anywhere other than on the anchor element closes the tooltip.

So I'm not quite sure how you're getting the behavior you described.

upon scrolling the page, the tooltip remains "in place" and doesn't get scrolled with the rest of the page (❌ doesn't work, setting data-scroll-hide={false} on TooltipWrapper doesn't seem to do anything)

As you can check in the same example, the tooltip should stay correctly placed even when scrolling.

If you could provide some basic sample code, it would help a lot.

[darya-talanina]

Thank you for the quick answer @gabrieljablonski .

pointer-events: auto; allowed me to implement hover and click behaviour for tooltip chidlren.

As for the remainding questions: I don't control tooltip's state myself. Here's a sandbox that shows the behaviour I had with v4.*:

• tooltip is closed when clicking on its anchor (input element)
• tooltip is NOT closed when clicking anywhere else outside its anchor
• when shown, tooltip remains in place during scroll

And here's the equivalent code using v5.3.2 where these behaviours are missing.

Could you provide some rough ideas on how to implement these behaviours with the latest package version?

Thank you.

[gabrieljablonski]

Now I get it. Thanks for the code samples.

This use case is a bit out of scope for the basic use cases for v5. We do support more complex uses, but you'll have to do some extra work.

For the tooltip to remain in place when scrolling, positionStrategy="fixed" should work.

As for the behavior when clicking the anchor, you can use the isOpen prop to control the tooltip state.

Here's an example. This isn't exactly the same behavior as your v4 example, but should be a good starting point for you.

[darya-talanina]

Thank you @gabrieljablonski . I now have all the information I need.