[BUG] Adding/removing svg elements breaks tooltip of existing elements about react-tooltip HOT 10 CLOSED

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.

from react-tooltip.

Whelp, that's embarassing. Sneaky regression bugs.

Feel free to use [email protected]

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

from react-tooltip.

Fix available on official release [email protected].

from react-tooltip.

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.

from react-tooltip.

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).

from react-tooltip.

@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.

from react-tooltip.

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

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

from react-tooltip.

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.

from react-tooltip.

Whelp, that's embarassing. Sneaky regression bugs.

Happens to the best of us

Feel free to use [email protected]

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! 💖

from react-tooltip.

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.

from react-tooltip.