Worse performance vs V4?

[knubie]

I'm migrating my app from v4 to v5 and I'm noticing some flickering / performance issues. For comparison:

V4:
https://user-images.githubusercontent.com/431251/230770121-5a8388e4-66ee-4226-87a1-7570a06ab577.mp4

V5:
https://user-images.githubusercontent.com/431251/230770135-71192e60-c891-401d-b21c-646b2c4124cf.mp4

Notice that in V5 the tooltip seems to stay on the previous anchor for a few milliseconds before moving to the new anchor, then disappears and reappears.

[gabrieljablonski]

This is most likely an issue with implementation on your end.

Are you able to share some samples from your project so we can give you some suggestions on how to improve this?

[knubie]

Sure. I haven't changed anything with the implementation other than updating the data-attributes on the anchors and the props on the Tooltip component. The only other difference would be that I'm not using the default CSS any more.

<SidebarItem
  data-tooltip-id="sidebar"
  data-tooltip-content="Simple test"
  data-tooltip-place="right"
>
  Get Started
</SidebarItem>
// ...
<Tooltip id="sidebar" class="tooltip" />

It's also worth pointing out that the tooltip does not hide immediately on mouseout, there is a small delay, even when delayHide is set to 0. If you have any clues as to what could be happening that would help me to debug I would much appreciate it.

[gabrieljablonski]

This probably won't change anything, but please also make sure you're running [email protected].

At first glance I can't see anything obvious that could be causing this problem, but here are a few ideas.

1. Try removing any custom CSS you have set on your application for .tooltip and .react-tooltip (this class is set internally)
2. Try moving the <Tooltip /> component all the way up to the root of the DOM and see if that makes a difference

Aside from these, it's hard to tell what might be wrong without seeing your project. If it's a private project and you're unable to share it, you'd have to provide a sample project demonstrating the issue.

[knubie]

Thanks for the suggestions @gabrieljablonski . I put together this simple repro repo that illustrates the problem. It was set up using create-react-app.

https://github.com/knubie/react-tooltip-demo

Let me know if you are able to reproduce the issues in the demo video.

[gabrieljablonski]

The only other difference would be that I'm not using the default CSS any more.

This should've been enough to diagnose it, my bad. As you can see on the README file (also on the docs), importing the default CSS file is NOT optional.

import 'react-tooltip/dist/react-tooltip.css'

You can still use your .tooltip class to style the tooltip as you want, but (as you've just experienced) the default styling is NOT just cosmetic.

[knubie]

Aha, gotcha. Thanks for the help @gabrieljablonski . I think I was under the impression that the css was optional after reading this migration guide: https://react-tooltip.com/docs/upgrade-guide/changelog-v4-v5

• CSS import is now optional, so you can modify and/or add any styling to your floating tooltip element

[gabrieljablonski]

Yeah that's our bad, I've already fixed that on a PR we'll be merging soon.
Thanks for reporting.

[knubie]

So, follow up question, is it possible to configure react-tooltip without the fade-in / delay?

[gabrieljablonski]

Have a look at the internal styling we use.

You should be able to override most stuff from .tooltip without breaking functionality, so transform: none should work on this case.

Just remember the class exposed externally is .react-tooltip (or use the className prop).