[BUG] Adding/removing svg elements breaks tooltip of existing elements

[fatton139]

Bug description

Odd one but, when svg elements are added/removed, the existing svg element's tooltips stop working.

Version of Package
v5.21.6

To Reproduce
Reproduction: https://codesandbox.io/s/ecstatic-torvalds-vmy6qm?file=/src/index.tsx
Click the "show" button then hover over the black box, you'll note that the tooltip stops showing up.

There are ways to reproduce it outside svgs but they'll require unconventional code, SVG is the most straightforward way to demo this.

Expected behavior
Tooltip should still show up on the existing svg elements.

Screenshots
See code sandbox reproduction

Thanks!

[gabrieljablonski]

It would make sense if the second svg failed to display the tooltip, since the tooltip only checks for potential anchors at the time it is mounted on the DOM, so elements added afterwards are usually ignored. (this is incorrect, see below)

As a workaround, you can force a re-render on the tooltip so that it does the check again. The easiest way in your example is like this:

<Tooltip id="my-tooltip" key={visible} />

but you can try other ways.

This isn't a fix though, so we'll leave this open for now.

[fatton139]

Thanks for the reply and great library, love the work you're putting in!

It would make sense if the second svg failed to display the tooltip

My initial thought as well, odd that the first one fails.

Since our svg is scattered across various components, passing around the key is a slight pain, our workaround is:

  useEffect(() => {
    const elements = document.querySelectorAll("rect");

    elements.forEach((element) => {
      const id = element.getAttribute("data-tooltip-id")!;
      const content = element.getAttribute("data-tooltip-content")!;
      element.setAttribute("data-tooltip-content", content);
      element.setAttribute("data-tooltip-id", id);
    });
  }, [visible]);

(which I'm not completely certain on why it works).

[gabrieljablonski]

@fatton139 I'd have to check, but very likely that works because updating the data-tooltip-content attribute of an anchor triggers a tooltip re-render, which makes the tooltip check again for all anchors.

Glad to know it works for now for your project, and we'll definitely be investigating this.

[fatton139]

If it helps, here is an example outside an SVG:

https://codesandbox.io/s/nostalgic-heisenberg-tkz68f?file=/src/App.tsx

[gabrieljablonski]

Considering 90% of bugs reported don't include a reproducible example (these are the most fun to debug 🙃🙃🙃), this will be more than enough. Thanks for taking the time.

[gabrieljablonski]

Whelp, that's embarassing. Sneaky regression bugs.

Feel free to use react-tooltip@5.21.7-beta.1110.0

That's the only change from v5.21.6, so don't worry about the beta tag. Once we do an official release, we'll close this and you should be able to upgrade without trouble.

Confirming it works with the beta version

[gabrieljablonski]

For future reference.

It would make sense if the second svg failed to display the tooltip, since the tooltip only checks for potential anchors at the time it is mounted on the DOM, so elements added afterwards are usually ignored.

This only applies when using anchorSelect without the data-tooltip-id attribute. As seen here, elements added to the DOM which have the data-tooltip-id attribute are automatically detected, without needing to force a tooltip re-render.

[fatton139]

Whelp, that's embarassing. Sneaky regression bugs.

Happens to the best of us

Feel free to use react-tooltip@5.21.7-beta.1110.0

That's the only change from v5.21.6, so don't worry about the beta tag. Once we do an official release, we'll close this and you should be able to upgrade without trouble.

Confirming it works with the beta version

Tested on our end and works brilliantly! Thanks for the quick resolution! 💖

[JuusoPalander]

The beta version you mentioned fixed a similar issue for a project I'm working on and we are using the data-tooltip-id only (without anchorSelect).

In our case we are adding a new element with tooltip data-attributes after a POST API call, and only the added element would show the tooltip without refresh.

[gabrieljablonski]

Fix available on official release react-tooltip@5.21.7.