From 1dd9e610aa5dfef40725fe24721d776abc4bce20 Mon Sep 17 00:00:00 2001
From: Jonathan Fulton <jonathan.s.fulton@gmail.com>
Date: Sat, 31 Jan 2026 18:49:43 -0500
Subject: [PATCH] fix(tooltip): add space between multiline labels in tooltip
 title

When chart labels are arrays (for multiline display on the axis),
the tooltip title was joining them with comma only (e.g., 'Yellow,subTitle')
instead of comma and space (e.g., 'Yellow, subTitle').

This fix joins array labels with ', ' for proper formatting in tooltips.

Fixes #12049
---
 src/plugins/plugin.tooltip.js      |  3 ++-
 test/specs/plugin.tooltip.tests.js | 32 ++++++++++++++++++++++++++++++
 2 files changed, 34 insertions(+), 1 deletion(-)

diff --git a/src/plugins/plugin.tooltip.js b/src/plugins/plugin.tooltip.js
index b39681ce2ca..8756eb03897 100644
--- a/src/plugins/plugin.tooltip.js
+++ b/src/plugins/plugin.tooltip.js
@@ -131,7 +131,8 @@ function createTooltipItem(chart, item) {
 
   return {
     chart,
-    label,
+    // If label is an array (multiline), join with ', ' for tooltip display
+    label: isArray(label) ? label.join(', ') : label,
     parsed: controller.getParsed(index),
     raw: chart.data.datasets[datasetIndex].data[index],
     formattedValue: value,
diff --git a/test/specs/plugin.tooltip.tests.js b/test/specs/plugin.tooltip.tests.js
index 94ae45b7246..26fab8821e5 100644
--- a/test/specs/plugin.tooltip.tests.js
+++ b/test/specs/plugin.tooltip.tests.js
@@ -1948,4 +1948,36 @@ describe('Plugin.Tooltip', function() {
       }]
     }));
   });
+
+  it('Should join multiline array labels with comma and space (issue #12049)', async function() {
+    var chart = window.acquireChart({
+      type: 'bar',
+      data: {
+        datasets: [{
+          label: 'Dataset 1',
+          data: [10, 20, 30],
+        }],
+        labels: [['Yellow', 'subTitle'], 'Point 2', 'Point 3']
+      },
+      options: {
+        plugins: {
+          tooltip: {
+            mode: 'index',
+            intersect: false,
+          }
+        }
+      }
+    });
+
+    var point = {
+      x: chart.chartArea.left + (chart.chartArea.right - chart.chartArea.left) / 6,
+      y: chart.chartArea.top + 5
+    };
+
+    var tooltip = chart.tooltip;
+    await jasmine.triggerMouseEvent(chart, 'mousemove', point);
+
+    // The title should show the label joined with ', ' not just ','
+    expect(tooltip.title).toEqual(['Yellow, subTitle']);
+  });
 });