React-tooltip: Support SVG elements?

[tanykim]

I tried to add this tooltip on SVG elements but seems like it doesn't support SVG. I thought it was z-index issue, but even though I manually set z-index and css position properties, but I had no luck.

Any solutions for this?

[redwarff]

Hi, I have just bumped into the same issue, but for me it actually works like it should. Just make sure to mount the <ReactTooltip /> component outside of <svg> and add the data-tip attribute directly onto svg elements (e.g. <line data-tip="..." />).

[raymondsiu]

Thanks @redwarff, that helped me as well!

[pelotom]

@redwarff I'm doing this, it doesn't seem to work at all 🤷‍♂️

[cullepm3]

I was also having trouble. In my case, I was updating the elements in the SVG on render. The tooltip would display, then stop working when the SVG changed. Adding rebuild to componentDidUpdate fixed the problem:

  componentDidUpdate() {
        ReactTooltip.rebuild()
  }