Add tooltip textLabelColor callback (#4199)

Add a new tooltip callback `labelTextColor` that returns the colour for each item in the body of the tooltip. Fixes issue #4191
chartjs · May 28, 2017 · 394382b · 394382b
1 parent 2258199
commit 394382b
Show file tree

Hide file tree

Showing 3 changed files with 17 additions and 4 deletions.
diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
@@ -74,6 +74,7 @@ All functions are called with the same arguments: a [tooltip item](#chart-config
 | `beforeLabel` | `tooltipItem, data` | Returns text to render before an individual label. This will be called for each item in the tooltip.
 | `label` | `tooltipItem, data` | Returns text to render for an individual item in the tooltip.
 | `labelColor` | `tooltipItem, chart` | Returns the colors to render for the tooltip item. [more...](#label-color-callback)
+| `labelTextColor` | `tooltipItem, chart` | Returns the colors for the text of the label for the tooltip item.
 | `afterLabel` | `tooltipItem, data` | Returns text to render after an individual label.
 | `afterBody` | `Array[tooltipItem], data` | Returns text to render after the body section
 | `beforeFooter` | `Array[tooltipItem], data` | Returns text to render before the footer section.
@@ -95,6 +96,9 @@ var chart = new Chart(ctx, {
                         borderColor: 'rgb(255, 0, 0)',
                         backgroundColor: 'rgb(255, 0, 0)'
                     }
+                },
+                labelTextColor:function(tooltipItem, chart){
+                    return '#543453';
                 }
             }
         }

diff --git a/src/core/core.tooltip.js b/src/core/core.tooltip.js
@@ -87,6 +87,9 @@ module.exports = function(Chart) {
 					backgroundColor: view.backgroundColor
 				};
 			},
+			labelTextColor: function() {
+				return this._options.bodyFontColor;
+			},
 			afterLabel: helpers.noop,
 
 			// Args are: (tooltipItems, data)
@@ -487,6 +490,7 @@ module.exports = function(Chart) {
 				model.opacity = 1;
 
 				var labelColors = [];
+				var labelTextColors = [];
 				tooltipPosition = Chart.Tooltip.positioners[opts.position](active, me._eventPosition);
 
 				var tooltipItems = [];
@@ -511,8 +515,10 @@ module.exports = function(Chart) {
 				// Determine colors for boxes
 				helpers.each(tooltipItems, function(tooltipItem) {
 					labelColors.push(opts.callbacks.labelColor.call(me, tooltipItem, me._chart));
+					labelTextColors.push(opts.callbacks.labelTextColor.call(me, tooltipItem, me._chart));
 				});
 
+
 				// Build the Text Lines
 				model.title = me.getTitle(tooltipItems, data);
 				model.beforeBody = me.getBeforeBody(tooltipItems, data);
@@ -525,6 +531,7 @@ module.exports = function(Chart) {
 				model.y = Math.round(tooltipPosition.y);
 				model.caretPadding = opts.caretPadding;
 				model.labelColors = labelColors;
+				model.labelTextColors = labelTextColors;
 
 				// data points
 				model.dataPoints = tooltipItems;
@@ -657,9 +664,6 @@ module.exports = function(Chart) {
 
 			ctx.textAlign = vm._bodyAlign;
 			ctx.textBaseline = 'top';
-
-			var textColor = mergeOpacity(vm.bodyFontColor, opacity);
-			ctx.fillStyle = textColor;
 			ctx.font = helpers.fontString(bodyFontSize, vm._bodyFontStyle, vm._bodyFontFamily);
 
 			// Before Body
@@ -693,7 +697,7 @@ module.exports = function(Chart) {
 						// Inner square
 						ctx.fillStyle = mergeOpacity(vm.labelColors[i].backgroundColor, opacity);
 						ctx.fillRect(pt.x + 1, pt.y + 1, bodyFontSize - 2, bodyFontSize - 2);
-
+						var textColor = mergeOpacity(vm.labelTextColors[i], opacity);
 						ctx.fillStyle = textColor;
 					}
 

diff --git a/test/specs/core.tooltip.tests.js b/test/specs/core.tooltip.tests.js
@@ -330,6 +330,7 @@ describe('Core.Tooltip', function() {
 			afterBody: [],
 			footer: [],
 			caretPadding: 2,
+			labelTextColors: ['#fff'],
 			labelColors: [{
 				borderColor: 'rgb(255, 0, 0)',
 				backgroundColor: 'rgb(0, 255, 0)'
@@ -393,6 +394,9 @@ describe('Core.Tooltip', function() {
 						},
 						afterFooter: function() {
 							return 'afterFooter';
+						},
+						labelTextColor: function() {
+							return 'labelTextColor';
 						}
 					}
 				}
@@ -476,6 +480,7 @@ describe('Core.Tooltip', function() {
 			afterBody: ['afterBody'],
 			footer: ['beforeFooter', 'footer', 'afterFooter'],
 			caretPadding: 2,
+			labelTextColors: ['labelTextColor', 'labelTextColor'],
 			labelColors: [{
 				borderColor: 'rgb(255, 0, 0)',
 				backgroundColor: 'rgb(0, 255, 0)'