SVG Tooltip containing a SVG element

SVG Tooltip containing a SVG element

Hello everyone.
i am developing a dashboard and have a table with several SVG elements. I can get a tooltip on those elements just fine from the title attribute, but i want the tooltip to contain another SVG.

When i put the code for the svg in the title attribute i can hardly see any of it but a square about 3x3 pixels which is colored in one of the colors used in the svg.

i do create the table and svg elements dynamical with the d3.js library.

Is it possible to display a SVG element in a tooltip? searching for this topic i only found answers to the question how to get a tooltip on a SVG element, not how to create a tooltip containing one.

  1. $(function () {
    track: true,
    content: function () {
    return $(this).attr("title");
That is the code to generate the tooltip. The code in the title attribute contains a single svg element with some text and rect elements.

Hope someone has some advice for me how to solve this!

EDIT: Looking at jakecigar's fiddle and showing my own title attribute text i realised how something is completely wrong with the coodinates. 
Digging into that i found out the problem i have is about how i create the title text.
I have a div in my page with the style set to display:none. And i have a routine that creates the svg in a given element based on given data. I let the method create the svg in the hidden div element and then set the title attribute as the innerHTML of the div. Problem is, whenever i set the div to display:none, calculation using getBBox() fail and i get the wrong coordinates.
When i remove the style from the div everything works fine, except that the tooltip size is smaller than the width of the svg. But that's another point.

So the question is now: How can i get the text to put in the title attribute without having a visible element that is used to create it? Does i have to change my routine so it is able to return plain text of the things created?