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

diff --git a/docs/configuration/tooltip.md b/docs/configuration/tooltip.md
index 21387f14011895491d1f3e1385f7e7866aee8357..8947d24633b77ed2d94f8210bb494fd7bc41eb39 100644 (file)
--- 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
index 3428f4ac9b30f59d7f24b56268025e42a9782e60..cb21a9bc97ade3a56dfc30c125717d1223eaa085 100644 (file)
--- 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
index 886e43a2fdb17a27a3c7431ee85b366b28bdaa21..0fbc46799b5a64408627c72a470730d497953eb0 100755 (executable)
--- 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)'