tooltip position changes from render to render

[vlukashov]

With react-tooltip 4.2.21 the tooltip position is unstable - the tooltip jumps around from render to render and sometimes it completely covers the anchor element:

<div
  style={{
    padding: "8rem 1rem 8rem",
    background: "#eeeeee",
    textAlign: "right"
  }}
>
  <span data-tip="In publishing and graphic design, Lorem ipsum is a placeholder text commonly used to demonstrate the visual form of a document or a typeface without relying on meaningful content. Lorem ipsum may be used as a placeholder before final copy is available.">
    Hower to see the <code>react-tooltip</code> tooltip
  </span>
  <ReactTooltip effect="solid" place="top"></ReactTooltip>
</div>

Full demo: https://codesandbox.io/s/reacttooltip-issue-demo-xggki?file=/index.js

This issue looks somewhat similar to these other issues in this repo: #476, #219, #264

[vlukashov]

Thanks for looking into this issue, @danielbarion!
Could you please add a comment here telling the version of react-tooltip where this issue is got fixed?

It would help the people coming to this page from search in the future in two ways:

• quickly tell if they their version still has the issue or not
• if they have this issue, which minimal version of react-tooltip they need to upgrade to to get the fix

[danielbarion]

Hi @vlukashov,

I closed all V4 issues right now due to V5 release a few mins ago.

The tooltip components were built from scratch using React 18 and we dropped package uuid.

The minimum necessary version of React is 18 because we are using useId instead of uuid.

Here is the full information:
https://react-tooltip.com/docs/category/upgrade-guide

I strongly recommend everyone upgrade to >= V5 if possible.

Thanks!