Fixing bug where tooltips don't show up in right position

if the chart is inside a <div> with overflow:scroll

src/tooltip.js

@@ -154,8 +154,13 @@ window.nv.tooltip.* also has various helper methods.
                     svgOffset.top = Math.abs(svgBound.top - chartBound.top);
                     svgOffset.left = Math.abs(svgBound.left - chartBound.left);
                 }
-                left += chartContainer.offsetLeft + svgOffset.left;
-                top += chartContainer.offsetTop + svgOffset.top;
+
+                //If the parent container is an overflow <div> with scrollbars, subtract the scroll offsets.
+                //You need to also add any offset between the <svg> element and its containing <div>
+                //Finally, add any offset of the containing <div> on the whole page.
+                left += chartContainer.offsetLeft + svgOffset.left - 2*chartContainer.scrollLeft;
+                top += chartContainer.offsetTop + svgOffset.top - 2*chartContainer.scrollTop;
+
             }
 
             if (snapDistance && snapDistance > 0) {
@@ -264,6 +269,7 @@ window.nv.tooltip.* also has various helper methods.
 
 
   //Original tooltip.show function. Kept for backward compatibility.
+  // pos = [left,top]
   nv.tooltip.show = function(pos, content, gravity, dist, parentContainer, classes) {
       
         //Create new tooltip div if it doesn't exist on DOM.
@@ -281,7 +287,10 @@ window.nv.tooltip.* also has various helper methods.
         container.style.opacity = 0;
         container.innerHTML = content;
         body.appendChild(container);
-
+        
+        //If the parent container is an overflow <div> with scrollbars, subtract the scroll offsets.
+        pos[0] = pos[0] - parentContainer.scrollLeft;
+        pos[1] = pos[1] - parentContainer.scrollTop;
         nv.tooltip.calcTooltipPosition(pos, gravity, dist, container);
   };
 
@@ -320,7 +329,7 @@ window.nv.tooltip.* also has various helper methods.
   };
 
   //Global utility function to render a tooltip on the DOM.
-  //pos = [X,Y] coordinates of where to place the tooltip, relative to the SVG chart container.
+  //pos = [left,top] coordinates of where to place the tooltip, relative to the SVG chart container.
   //gravity = how to orient the tooltip
   //dist = how far away from the mouse to place tooltip
   //container = tooltip DIV

test/lineChartTest.html

@@ -4,13 +4,13 @@
 <link href="../src/nv.d3.css" rel="stylesheet" type="text/css">
 <link href="teststyle.css" rel="stylesheet" type='text/css'>
 <style>
-#chart14 {
+#chart13, #chart14 {
   overflow: scroll;
   width: 500px;
   height: 300px;
 }
 
-#chart14 svg {
+#chart13 svg, #chart14 svg {
   width: 700px;
   height: 400px;
 }
@@ -80,12 +80,17 @@
         <svg></svg>
       </div>
 
+      <div class='chart third' id='chart13'>
+        Chart in a overflow div with scrolls (new tooltips)
+        <svg></svg>
+      </div>
+
       <div class='chart third' id='chart14'>
-        Chart in a overflow div with scrolls
+        Chart in a overflow div with scrolls (old tooltips)
         <svg></svg>
       </div>
 
-      <div class='chart third' id='chart13'>
+      <div class='chart third' id='chart15'>
         What if there are null, Infinity and NaN values in points?
         <svg></svg>
       </div>
@@ -147,9 +152,9 @@ defaultChartConfig("chart9", fibonacci());
 defaultChartConfig("chart10", lotsofSeries());
 defaultChartConfig("chart11", backwards(),false);
 defaultChartConfig("chart12", duplicateX(),false);
-defaultChartConfig("chart13", withNaNs());
-defaultChartConfig("chart14",sinAndCos(), true, false, {width: 700, height: 400});
-
+defaultChartConfig("chart13",hyperbole(), true, false, {width: 700, height: 400});
+defaultChartConfig("chart14",hyperbole(), false, false, {width: 700, height: 400});
+defaultChartConfig("chart15", withNaNs());
 
 function defaultChartConfig(containerid, data, guideline, useDates, auxOptions) {
   if (auxOptions === undefined) auxOptions = {};