Tippyjs: Doesn't Work on SVG elements

[neuralism]

I tried adding a title attribute to an SVG circle, but it doesn't work. Is this feature currently available?

[atomiks]

Can you use a div wrapper around it and put the title on that instead?

[neuralism]

Thanks for your response! I wanted to try that, but I can't. I am using an SVG canvas and I have multiple SVG objects in that canvas populated using D3.

[atomiks]

Are you using a <title> tag like this?

<svg xmlns="http://www.w3.org/2000/svg">
  <rect x="20" y="30" width="200" height="150">
    <title>Hello, World!</title>
  </rect>
</svg>

This won't work currently as it only checks a title attribute on the element rather than a node like that. I can add it in as a feature for the next release though!

[neuralism]

Nope! I am using it like:

<circle cx="68.572" cy="50" r="36.97051207883934" title="Hello, World!"></circle>

If this doesn't work then it's alright. I'll have to find my way around this. Thank you so much nonetheless! Tippy has been great so far!

[atomiks]

Are you passing in the svg element to be tooltipped or the circle node there?

If you pass it directly to the element with the actual title attribute, it will work: http://jsfiddle.net/819nouob/

[neuralism]

Thank you so much! This is great! What if I have multiple SVG elements? Can I do a select all? you're a life-saver!

[atomiks]

In that case, pass just a CSS selector in: http://jsfiddle.net/819nouob/3/

If you have different types of elements, you can just separate them by commas like new Tippy('svg rect, svg circle')

[neuralism]

Works! Thank you so much, atomiks! I have no idea how I can ever repay you! You saved my life!

[atomiks]

Awesome =]

[nholden]

Thanks for the great demo @atomiks! I'm new to Tippy.js and this was super helpful. In case anyone comes across this in the future, I updated the last demo to work with v2.0.8: http://jsfiddle.net/nholden/b7yk6mbb/1/

[atomiks]

Nice, thank you!