I am trying to add React-Tooltip to my React app, and when I just statically add data-tip="hello world" to an element, it is working, however, when I append the attribute to an element inside of svg it is not. I see that the attribute is added inside html:

But hovering over the element does not show the tooltip. I am using collapsible tree code:

And trying to make tooltip working like that:

node.attr("data-tip", "helloworld");

Any suggestions would be greatly appreciated.

I am trying to add React-Tooltip to my React app, and when I just statically add data-tip="hello world" to an element, it is working, however, when I append the attribute to an element inside of svg it is not. I see that the attribute is added inside html:

But hovering over the element does not show the tooltip. I am using collapsible tree code:

https://bl.ocks/mbostock/4339083

And trying to make tooltip working like that:

node.attr("data-tip", "helloworld");

Any suggestions would be greatly appreciated.

• javascript
• reactjs

Share Improve this question Follow asked Jun 19, 2018 at 20:16 Nikita VlasenkoNikita Vlasenko 4,35288 gold badges5454 silver badges9696 bronze badges 1

• this might help github./wwayne/react-tooltip/issues/306 – Paul Fitzgerald Commented Jun 19, 2018 at 20:23

Add a ment  | 

2 Answers 2

Sorted by: Reset to default 3

I have recently open-sourced react-svg-tooltip, a React ponent to create tooltips for SVG elements. It is still wet from birth, but maybe you still find it useful.

If you want to show tooltip inside SVG you can have look on following link: How to add a tooltip to an svg graphic?