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()
  }

[ryandorward]

Is there an equivalent technique for v5 ? it looks like Tooltip.rebuild is not a function in v5

Thanks for the great project.

[gabrieljablonski]

Is there an equivalent technique for v5 ? it looks like Tooltip.rebuild is not a function in v5

Thanks for the great project.

Do you mind opening a new issue with sample code or a CodeSandBox demonstrating the problem on v5? As I see it, v5 should work fine with svg elements without any extra work, but we'll see what we can do if it's not the case.

[ryandorward]

Thank you. I will make sure I'm not doing something wrong before creating the issue.
I'm using react-tooltip to create tooltips on markers for Mapbox maps. I used following technique in v4 to get the tips to show up:

const mounted = useRef();
useEffect(() => { // update the ReactTooltips as elements in the svg/map change
	mounted.current ? ReactTooltip.rebuild() : mounted.current = true
})

In v5 I tried without that technique and the tips didn't show up, but it's possible I'm doing it wrong.

[gabrieljablonski]

In v5 I tried without that technique and the tips didn't show up, but it's possible I'm doing it wrong.

Try following the examples in the docs and getting the tooltip to work on regular html elements, then try it on svgs. If it doesn't work on svgs, please open an issue with some sample code. Thanks.

[ryandorward]

I can confirm that react-tooltip v5 is working properly in conjunction with map markers using react-map-gl, I was just doing it wrong previously. Thanks!