Using the dynamic absolute position of the canvas, even for relative placement of...

This will work with both relative and absolute position for the chart and will apply the tooltips appropriately. I have tested in a normal context and then also using the chart in the second column of two column table i.e. in a different position on the screen. Without this, the default tooltips will appear at the same position no matter where the chart is placed. They will appear misplaced. The fix I have provided allows the tooltips to appear smoothly with the chart, no matter where it is placed on the web page.

diff --git a/samples/line-customTooltips.html b/samples/line-customTooltips.html
index 50c10642061ab18ad0cea25f01fd67027310bbc9..6695cb66346aaa97c34c467da0b69a138b7dc12b 100644 (file)
--- a/samples/line-customTooltips.html
+++ b/samples/line-customTooltips.html
@@ -90,14 +90,14 @@
         }
       }
 
-      var offset = $(this._chart.canvas).offset();
+      var position = $(this._chart.canvas)[0].getBoundingClientRect();
 
       // Display, position, and set styles for font
       tooltipEl.css({
         opacity: 1,
         width: tooltip.width ? (tooltip.width + 'px') : 'auto',
-        left: offset.left + tooltip.x + 'px',
-        top: offset.top + top + 'px',
+        left: position.left + tooltip.x + 'px',
+        top: position.top + top + 'px',
         fontFamily: tooltip._fontFamily,
         fontSize: tooltip.fontSize,
         fontStyle: tooltip._fontStyle,