v5 without v4 .rebuild()

[ivansilvestre]

Basically I'm using a library, react-svg-pan-zoom, that places svg depending on the dynamic coordinates we give.
In this case, the v4 .rebuild() was to place the tooltip under the coordinates that it gave when hovering over the specific svg icon.
At the moment, with v5 the tooltip is updating the hover data but the tooltip box appears outside the svg icon and is always on screen, it doesn't just appear on the hover as before with v4.

Is there any way to trigger the tooltip like .rebuild() in v4?

v4:

const handleMouseOver = (e) => {
    setData(...);
    ReactTooltip.rebuild();
};

To insert Dynamic tooltip:

componentNode.setAttribute("data-tip", "");
componentNode.setAttribute("data-for", "tooltip");

React component:

<ReactTooltip
  id="tooltip"
  place="bottom"
  type="light"
  effect="solid"
  backgroundColor="transparent"
  getContent={() => {
    return (
      <Card
        mainComponent={data?.mainComponent}
        description={data?.description}
        value={value}
        machine={`${t("Machine")} ${id}`}
      />
    );}}
 />

v5:

componentNode.setAttribute("data-content", "");
componentNode.setAttribute("data-for", "tooltip");

<ReactTooltip
  id="tooltip"
  place="bottom"
  type="light"
  effect="solid"
  backgroundColor="transparent"
  content={
      <Card
        mainComponent={data?.mainComponent}
        description={data?.description}
        value={value}
        machine={`${t("Machine")} ${id}`}
      />
    }
 />

[gabrieljablonski]

Do you mind building a CodeSandBox or something similar so it's easier to understand the problem?

By the way, I've just realized some sections in the documentation say that data-tip was changed to data-content. That is incorrect, all new data-* attributes match data-tooltip-*, so for the content it would be data-tooltip-content. We'll be fixing the docs soon.

Also, this line doesn't do anything, since this isn't the way an anchor element is attached to a tooltip anymore.

componentNode.setAttribute("data-for", "tooltip");

[ivansilvestre]

Thanks for the last observation.

I'm working with svg icons where i only get the X and Y when i handle with mouse hover.
With hover i can get the correct data from that icon but the tooltip don´t have the trigger to update the X and Y tooltip on real time. The tooltip keep shows always in the same place of the screen, even with the correct data.
With .rebuild() trigger it worked fine.

[gabrieljablonski]

Are you referring to the v4 effect prop set to float?

https://reacttooltip.github.io/react-tooltip/

Unfortunately, v5 launched without the float effect implemented, so right now we only have the old solid effect, which means the tooltip is fixed in place above the anchor element, but we are already working on that feature (#861).

We also accept contributions, if you'd be willing to help out. #861 already has the basics of how we're planning on doing it.

[ivansilvestre]

No, effect is ok on my side. It works with solid or float.
Is something similar to this situation:
https://stackoverflow.com/questions/62043514/react-tooltip-doesnt-show-on-conditional-render
But on my side, it updates the data but not the x and y and the tooltip always stays in the same place.
With rebuild it worked fine.

[gabrieljablonski]

Then I don't quite understand. The StackOverflow question doesn't seem related to what you described.

It would really help if you could post some sample code of what you're trying to do with v5, or at least a working example with v4, so I can understand what you're trying to accomplish.

[ivansilvestre]

Working example with v4 is on my first post.

const handleMouseOver = (e) => {
    setData(...);
    ReactTooltip.rebuild();
};

excerpt of code from the function that build dynamic x and y with the JS element created on that moment:

(...)
componentNode.setAttribute("data-content", "");
componentNode.setAttribute("data-for", "tooltip"); 
componentNode.setAttribute("x", `${data.xAxis}`);
componentNode.setAttribute("y", `${data.yAxis}`);
(...)

<ReactTooltip
  id="tooltip"
  place="bottom"
  type="light"
  effect="solid"
  backgroundColor="transparent"
  getContent={() => {
    return (
      <Card
        mainComponent={data?.mainComponent}
        description={data?.description}
        value={value}
        machine={`${t("Machine")} ${id}`}
      />
    );}}
 />

With this way on v4 react tooltip is working fine on my side.

[danielbarion]

Hi @ivansilvestre, I believe what @gabrieljablonski asked, is a live example and I agree.

Can you please create a simple example on https://codesandbox.io/ that reflects what you want, please?

I read the comments and I believe you're thinking about v4 .rebuild(), but the .rebuild() only triggers a re-render of react-tooltip in v4 (basically a workaround), this is because of the old and obsolete code that v4 was built (in the past, was a very nice code). In v5 we don't need to trigger the re-render manually, we have the watchers in useEffect as we are using React Hooks, you just should know what prop you need to update and trigger the re-rendering.

[ivansilvestre]

I think the problem may be related to that, because now you are using react hooks.
As I'm injecting the icons into the dom and not into virtual dom, maybe it doesn't detect the update of the coordinates. I say this because the variable information detects changes in the object but does not inject the x and y into your html (tooltip box).
For now I will stay with version 4. It's a very specific situation and since it' s for the work I can't share the video.
Is there any possibility of putting a ref on your box? Maybe I could inject through the forwardRef.
Another situation, if it is an object and it is empty, in my case, it still shows the box even with empty data. I need to validate that the object.length to appear afterwards.

[gabrieljablonski]

Another situation, if it is an object and it is empty, in my case, it still shows the box even with empty data. I need to validate that the object.length to appear afterwards.

v5.2.0 fixes this, the tooltip is not shown when content is empty.

Is there any possibility of putting a ref on your box? Maybe I could inject through the forwardRef.

This doesn't seem like it would help much.

For now I will stay with version 4.

For sure then. If you'd like to migrate to v5 in the future, try preparing a demo that you'd be allowed to share, or at least a video so we can understand exactly your use case.