var hoverTimer = null;
var hoverDelay = 400; //ms
  
function hovertext(text, evt){
  var tooltip = document.getElementById("tooltip-text");
  var tooltip_bg = document.getElementById("tooltip-box");    
  var tool_pt = document.getElementById("tooltip-point");
  if (evt === undefined){
    if(hoverTimer) {
      clearTimeout(hoverTimer); //stop when off area
    }
    tooltip.firstChild.data = ' ';
    tooltip_bg.setAttribute("class","hidden");
    tooltip_bg.setAttribute("x",0);
    tool_pt.setAttribute("class","hidden");
  } else {
    pt = cursorPoint(evt);
    pt.x = Math.round(pt.x);
    pt.y = Math.round(pt.y);
    var svgWidth = Number(svg.getAttribute("viewBox").split(" ")[2]);
    tooltip.setAttribute("x",pt.x);
    tooltip.setAttribute("y",pt.y);
    tooltip.firstChild.data = text;
    var length = Math.round(tooltip.getComputedTextLength());
    if (pt.x - length/2 - 6 < 0){
      tooltip.setAttribute("x",length/2+6);
    } else if (pt.x + length/2 + 6 > svgWidth) {
      tooltip.setAttribute("x", svgWidth-length/2-6);
    }
    tool_pt.setAttribute("transform","translate("+pt.x+","+pt.y+")");
    tooltip_bg.setAttribute("x",tooltip.getAttribute("x")-length/2-6);
    tooltip_bg.setAttribute("y",pt.y-35);
    tooltip.setAttribute("class","shown");
    tooltip_bg.setAttribute("class","tooltip-box");
    tool_pt.setAttribute("class","tooltip-box");
    tooltip_bg.setAttribute("width", length+12);
    if(hoverTimer){
      clearTimeout(hoverTimer);
    }
    hoverTimer = setTimeout(function(){
      ga("send", "event", "figure", evt.target.id);
    }, hoverDelay);
  }
}
function cursorPoint(evt){  
  pt.x = evt.clientX; pt.y = evt.clientY;
  return pt.matrixTransform(svg.getScreenCTM().inverse());
}
@@ -87,179 +87,220 @@
 var 
-tool
 tip
+G
  = d
-ocument.getElementById(%22tooltip-text%22);%0A  var tooltip_bg = document.getElementById(%22tooltip-box
+3.selectAll('#tooltip-group');%0A  if (tipG.empty()) %7B%0A    console.error(%22a #tooltip-group %3Cg/%3E element is required
 %22);
+%0A
   
+%7D
   %0A  
-var tool_pt = document.getElementById(%22tooltip-point%22);
+// remove all children of the tooltip group:%0A  tipG.selectAll(%22*%22).remove();%0A  
 %0A  i
@@ -408,178 +408,431 @@
 %7D%0A  
-  tooltip.firstChild.data = ' ';%0A    tooltip_bg.setAttribute(%22class%22,%22hidden%22);%0A    tooltip_bg.setAttribute(%22x%22,0);%0A    tool_pt.setAttribute(%22class%22,%22hidden%22);%0A  %7D else %7B
+%7D else %7B%0A    var tooltip_bg = tipG.append('rect').attr(%22id%22, %22tooltip-box%22).attr(%22height%22, 24).attr(%22class%22, %22tooltip-box%22);%0A    var tool_pt = tipG.append('path').attr(%22id%22, %22tooltip-point%22).attr(%22d%22, %22M-6,-11 l6,10 l6,-11%22).attr(%22class%22,%22tooltip-box%22);%0A    var tooltip = tipG.append('text').attr(%22id%22, %22tooltip-text%22).attr(%22dy%22,%22-1.1em%22).attr('text-anchor',%22middle%22).attr(%22class%22,%22tooltip-text-label svg-text%22).text(text);
 %0A   
@@ -999,102 +999,37 @@
 tip.
-setAttribute(%22x%22,pt.x);%0A    tooltip.setAttribute(%22y%22,pt.y);%0A    tooltip.firstChild.data = text
+attr(%22x%22,pt.x).attr(%22y%22,pt.y)
 ;%0A  
@@ -1062,16 +1062,23 @@
 tooltip.
+node().
 getCompu
@@ -1139,36 +1139,28 @@
     tooltip.
-setAttribute
+attr
 (%22x%22,length/
@@ -1228,28 +1228,20 @@
 tooltip.
-setAttribute
+attr
 (%22x%22, sv
@@ -1278,28 +1278,20 @@
 tool_pt.
-setAttribute
+attr
 (%22transf
@@ -1347,33 +1347,26 @@
 _bg.
-setAttribute
+attr
 (%22x%22,
+ 
 tooltip.
 getA
@@ -1361,28 +1361,20 @@
 tooltip.
-getAttribute
+attr
 (%22x%22)-le
@@ -1386,223 +1386,59 @@
 2-6)
-;%0A    tooltip_bg.setAttribute(%22y%22,pt.y-35);%0A    tooltip.setAttribute(%22class%22,%22shown%22);%0A    tooltip_bg.setAttribute(%22class%22,%22tooltip-box%22);%0A    tool_pt.setAttribute(%22class%22,%22tooltip-box%22);%0A    tooltip_bg.setAttribute
+.attr(%22y%22,pt.y-35).attr(%22class%22,%22tooltip-box%22).attr
 (%22wi
@@ -1455,16 +1455,17 @@
 th+12);%0A
+%0A
     if(h

convert tooltip to rough d3