title: D3 tooltip not displaying in Firefox
body: <p>I developed a chart some time ago and it was working correctly. Recently I noticed that the tooltip isn't working (anymore) in Firefox although it is working correctly in Safari (both on Mac OS). Can anyone suggest what might cause the problem?</p>
  
  <p>The chart is embedded in a Drupal site at <a href="http://www.climateactionnow.ca/cumulative-manmade-emissions-1854-2010" rel="nofollow">http://www.climateactionnow.ca/cumulative-manmade-emissions-1854-2010</a></p>
  
  <p>UPDATE: Since posting this I have found a number of reports of errors of this sort using Firefox ... but haven't found a solution yet.</p>
  
  <p>The code is: </p>
  
  <pre><code>&lt;script&gt;
  
  var w = 450,
  h = 500,
  r = Math.min(w, h) / 2,
  color = d3.scale.category20c();
  
  function prettyAlert(p_message, p_title) {
  p_title = p_title || "";
  $(p_message).dialog({
     title: p_title,
     width:400,
     height:400,
     resizable: false,
     modal : true,
     overlay: { 
       backgroundColor: "#000", opacity: 0.5 
       },
     close: function(ev, ui) {
       $(this).remove(); 
       }
  });
  }
  hoverover=d3.select("body")
  .append("div")
  .attr("class","arcs-hoverover")
  .style("display","none")
  .style("position","absolute");
  
  var svg = d3.select("#chart").append("svg:svg")
  .attr("width", w)
  .attr("height", h)
  .append("svg:g")
  .attr("transform", "translate(" + w / 2 + "," + h / 2 + ")");
  
  var partition = d3.layout.partition()
  .sort(null)
  .size([2 * Math.PI, r * r])
  .children(function(d) { return isNaN(d.value) ? d3.entries(d.value) : null; })
  .value(function(d) { return d.value; });
  
  var arc = d3.svg.arc()
  .startAngle(function(d) { return d.x; })
  .endAngle(function(d) { return d.x + d.dx; })
  .innerRadius(function(d) { return Math.sqrt(d.y); })
  .outerRadius(function(d) { return Math.sqrt(d.y + d.dy); })
  ;
  
  d3.json("../sites/default/d3_files/json/ranking.json", function(json) {
  
  path = svg.data(d3.entries(json)).selectAll("path")
  .data(partition.nodes)
  .enter().append("svg:path")
  .attr("d", arc)
  .attr("fill", function(d) { 
       if (d.key != "Not attributed") {
          return color(d.key);
          }
       else {
          return "transparent";
          } // end else
       }) // end fill
   .style("stroke", function(d) { 
       if (d.key == "Not attributed") {
          return "lightgrey";}
       }) // end stroke
  .on("click", magnify)
  .each(stash)
  .on("mouseout",function(d){ 
    d3.select("body")
    .select(".arcs-hoverover")
    .style("display","none");  
    d3.select(this)
    .style("stroke-width","1px")
  }) // end mouseout
  
  .on("mousemove",function(d){
     var bodyOffsets = document.body.getBoundingClientRect();
     d3.select(this)
       .style("stroke-width","1px");
     d3.select("body")
       .select(".arcs-hoverover")
       .style("display","block") 
       .style("top", (d3.event.clientY - bodyOffsets.top -300)+"px")
       .style("left",(d3.event.clientX - bodyOffsets.left -20)+"px")
       .html(function( ){
            var units=calcUnits(d.key);
             return d.key + "&lt;br /&gt;" + d3.round(d.value/1000, 2)+ units;
       }) // end html
    }) // end mousemove
  
   ; // end append g
  }); // end d3.json
  
  function calcUnits (type) {
  // str.indexOf("welcome")
  if ((type.indexOf("Production")!=-1) || (type.indexOf("Flaring")!=-1))   { // found
    return " GtCO2"
   }
  else {
    return " GtCO2e"
   };
  };
  
  function clickAlert (label) {
  };
  
  // Distort the specified node to 80% of its parent.
  function magnify(node) {
  if (parent = node.parent) {
  var parent,
  x = parent.x,
  k = .8;
  parent.children.forEach(function(sibling) {
      x += reposition(sibling, x, sibling === node
      ? parent.dx * k / node.value
      : parent.dx * (1 - k) / (parent.value - node.value));
  });
  } else {
  reposition(node, 0, node.dx / node.value);
  }
  
  path.transition() // was path - undefined
  .duration(750)
  .attrTween("d", arcTween);
  }; // end magnify
  
  // Recursively reposition the node at position x with scale k.
  function reposition(node, x, k) {
  node.x = x;
  if (node.children &amp;&amp; (n = node.children.length)) {
      var i = -1, n;
      while (++i &lt; n) x += reposition(node.children[i], x, k);
      }
  return node.dx = node.value * k;
  }; // end reposition
  
  // Stash the old values for transition.
  function stash(d) {
  d.x0 = d.x;
  d.dx0 = d.dx;
  }; // end stash
  
  // Interpolate the arcs in data space.
  function arcTween(a) {
  var i = d3.interpolate({x: a.x0, dx: a.dx0}, a);
  return function(t) {
      var b = i(t);
      a.x0 = b.x;
      a.dx0 = b.dx;
      return arc(b);
      };
  }; // end arcTween
  &lt;/script&gt;
  </code></pre>