Merge pull request #1603 from nnnick/fix-tooltips

Only call custom tooltips when elements have changed.  But be sure to call update internally any time that tooltips need to be redrawn.

samples/line-customTooltips.html

@@ -42,10 +42,11 @@
     <canvas id="chart1" width="300" height="100" />
   </div>
   <script>
+    window.count = 0;
     Chart.defaults.global.pointHitDetectionRadius = 1;
     var customTooltips = function(tooltip) {
 
-      console.log(tooltip);
+      console.log(window.count++, tooltip);
 
       // Tooltip Element
       var tooltipEl = $('#chartjs-tooltip');

src/core/core.controller.js

@@ -294,13 +294,25 @@
 			var eventPosition = helpers.getRelativePosition(e, this.chart);
 			var elementsArray = [];
 
-			helpers.each(this.data.datasets, function(dataset, datasetIndex) {
-				if (helpers.isDatasetVisible(dataset)) {
-					helpers.each(dataset.metaData, function(element, index) {
-						if (element.inLabelRange(eventPosition.x, eventPosition.y)) {
-							elementsArray.push(element);
+			var found = (function(){
+				for (var i = 0; i < this.data.datasets.length; i++) {
+					if (helpers.isDatasetVisible(this.data.datasets[i])) {
+						for (var j = 0; j < this.data.datasets[i].metaData.length; j++) {
+							if (this.data.datasets[i].metaData[j].inRange(eventPosition.x, eventPosition.y)) {
+								return this.data.datasets[i].metaData[j];
+							}
 						}
-					}, this);
+					}
+				}
+			}).call(this);
+
+			if(!found){
+				return elementsArray;
+			}
+
+			helpers.each(this.data.datasets, function(dataset, dsIndex){
+				if(helpers.isDatasetVisible(dataset)){
+					elementsArray.push(dataset.metaData[found._index]);
 				}
 			}, this);
 
@@ -459,6 +471,7 @@
 				// The usual updates
 				this.tooltip.initialize();
 				this.tooltip._active = this.tooltipActive;
+				this.tooltip.update();
 			}
 
 			// Hover animations
@@ -484,11 +497,12 @@
 					(this.lastTooltipActive.length !== this.tooltipActive.length) ||
 					changed) {
 
-					if (this.options.tooltips.enabled || this.options.tooltips.custom) {
-						this.tooltip.update();
-					}
 					this.stop();
 
+					if (this.options.tooltips.enabled || this.options.tooltips.custom) {
+						this.tooltip.update(true);
+					}
+
 					// We only need to render at this point. Updating will cause scales to be recomputed generating flicker & using more
 					// memory than necessary.
 					this.render(this.options.hover.animationDuration, true);

src/core/core.tooltip.js

@@ -193,7 +193,35 @@
 			return lines;
 		},
 
-		update: function() {
+		getAveragePosition: function(elements){
+
+			if(!elements.length){
+				return false;
+			}
+
+			var xPositions = [];
+			var yPositions = [];
+
+			helpers.each(elements, function(el){
+				var pos = el.tooltipPosition();
+				xPositions.push(pos.x);
+				yPositions.push(pos.y);
+			});
+
+			var x = 0, y = 0;
+			for (var i = 0; i < xPositions.length; i++) {
+				x += xPositions[i];
+				y += yPositions[i];
+			}
+
+			return {
+				x: Math.round(x / xPositions.length),
+				y: Math.round(y / xPositions.length)
+			};
+
+		},
+
+		update: function(changed) {
 
 			var ctx = this._chart.ctx;
 
@@ -214,7 +242,7 @@
 						index: element._index,
 						datasetIndex: element._datasetIndex,
 					});
-					tooltipPosition = this._active[0].tooltipPosition();
+					tooltipPosition = this.getAveragePosition(this._active);
 				} else {
 					helpers.each(this._data.datasets, function(dataset, datasetIndex) {
 						if (!helpers.isDatasetVisible(dataset)) {
@@ -238,7 +266,7 @@
 						});
 					}, this);
 
-					tooltipPosition = this._active[0].tooltipPosition();
+					tooltipPosition = this.getAveragePosition(this._active);
 					tooltipPosition.y = this._active[0]._yScale.getPixelForDecimal(0.5);
 				}
 
@@ -262,7 +290,7 @@
 				this._model.opacity = 0;
 			}
 
-			if (this._options.tooltips.custom) {
+			if (changed && this._options.tooltips.custom) {
 				this._options.tooltips.custom.call(this, this._model);
 			}
 
@@ -270,6 +298,7 @@
 		},
 		draw: function() {
 
+
 			var ctx = this._chart.ctx;
 			var vm = this._view;