javascript - foreignObject div transform not working D3 -

at moment, d3 code animates svg circles along path, have svg 'name' labels moving alongside each.

when circle hovered over, div (which have created foreign object in same group 'g2' labels) appears comment inside.

i want these tooltips. problem cannot div transform along path in same way name labels - stick top left-hand corner of page.

i not sure if problem how grouping things, or whether foreignobject should directly appended svg. have tried various things , suggestions other questions no success, appreciated!

also, interested in making work in chrome.

here jsfiddle: http://jsfiddle.net/yumip/q5jag/1618/

var greetings = ["hello","hi","howdy"]; var names = ["person a","person b","person c"];  var width = 960,     height = 500;  var n = greetings.length,     m = 12,     degrees = 180 / math.pi;  var bubbles = d3.range(n).map(function() {   var x = math.random() * width,       y = math.random() * height;   return {     vx: math.random() * 2 - 1,     vy: math.random() * 2 - 1,     path: d3.range(m).map(function() { return [x, y]; }),     count: 0   }; });  var svg = d3.select("body").select("svg")     .attr("width", width)     .attr("height", height);  var g = svg.selectall("g")     .data(bubbles)   .enter().append("g")   .on("mouseover", function(d,i){console.log(greetings[i])});  var g2 = g.append("g");  var labels = g2.append("text")     .attr("dy",".35em")     .style("font-size", "19")     .attr("class", "labels")     .text(function(d,i){return names[i]});  var speech = g2.append("foreignobject")           .attr("class", "tooltip")           .style("opacity","0")           .append("xhtml","div")           .append('div')           .attr("class","tooltip")           .html(function(d,i){return greetings[i]});  var circle = g.selectall("circle")     .data(bubbles)     .enter().append("circle")     .attr("r", 15)     .on("mouseover", function(d,i)  {speech.filter(function(p){           if(p === d) d3.select(this).transition().duration(1000).style("opacity","1");           else d3.select(this).style("opacity","0");        });})        .on("mouseout", function(d,i) {speech.filter(function(p){              if(p === d) d3.select(this).transition().duration(1000).style("opacity","0");          });});  d3.timer(function() {   (var = -1; ++i < n;) {     var bubble = bubbles[i],         path = bubble.path,         dx = bubble.vx,         dy = bubble.vy,         x = path[0][0] += dx,         y = path[0][1] += dy,         speed = math.sqrt(dx * dx + dy * dy),         count = speed * 10,         k1 = -5 - speed / 3;      if (x < 0 || x > width) bubble.vx *= -1;     if (y < 0 || y > height) bubble.vy *= -1;   }   circle.attr("transform", circletransform);   g2.attr("transform", texttransform); });  function circletransform(d) {   return "translate(" + d.path[0] + ")"; }  function texttransform(d) {   return "translate(" + d.path[0]  + ")translate(30)"; } 

sorry post code.. sort of confused parts of code considered unnecessary question, tips helpful.