From be58cb4426519ac62a9665629453d9d30955fab0 Mon Sep 17 00:00:00 2001
From: fs <fs@breadcrumb-solutions.de>
Date: Sun, 5 Apr 2026 21:11:28 +0200
Subject: [PATCH] feat(helpdesk): add tooltip on trend arrow explaining backlog
 direction
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Hover over ↑/↓ shows a data-tooltip explaining the delta in plain
language: 'More tickets received than resolved — backlog is growing.'

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 modules/helpdesk/i18n/default_de.json                    | 4 +++-
 modules/helpdesk/i18n/default_en.json                    | 4 +++-
 .../helpdesk/pages/helpdesk/team/index(default).phtml    | 2 ++
 modules/helpdesk/web/js/helpdesk-team.js                 | 9 ++++++++-
 4 files changed, 16 insertions(+), 3 deletions(-)

diff --git a/modules/helpdesk/i18n/default_de.json b/modules/helpdesk/i18n/default_de.json
index 83e51e4..c77cb43 100644
--- a/modules/helpdesk/i18n/default_de.json
+++ b/modules/helpdesk/i18n/default_de.json
@@ -301,5 +301,7 @@
   "Current": "Aktuell",
   "Performance": "Leistung",
   "Historical": "Historisch",
-  "Queue": "Warteschlange"
+  "Queue": "Warteschlange",
+  "trend_tooltip_up": "Mehr Tickets erhalten als gelöst im Zeitraum — Rückstau wächst.",
+  "trend_tooltip_down": "Mehr Tickets gelöst als erhalten im Zeitraum — Rückstau wird abgebaut."
 }
diff --git a/modules/helpdesk/i18n/default_en.json b/modules/helpdesk/i18n/default_en.json
index 0046435..5778406 100644
--- a/modules/helpdesk/i18n/default_en.json
+++ b/modules/helpdesk/i18n/default_en.json
@@ -301,5 +301,7 @@
   "Current": "Current",
   "Performance": "Performance",
   "Historical": "Historical",
-  "Queue": "Queue"
+  "Queue": "Queue",
+  "trend_tooltip_up": "More tickets received than resolved in the period — backlog is growing.",
+  "trend_tooltip_down": "More tickets resolved than received in the period — backlog is shrinking."
 }
diff --git a/modules/helpdesk/pages/helpdesk/team/index(default).phtml b/modules/helpdesk/pages/helpdesk/team/index(default).phtml
index 8f96574..d002720 100644
--- a/modules/helpdesk/pages/helpdesk/team/index(default).phtml
+++ b/modules/helpdesk/pages/helpdesk/team/index(default).phtml
@@ -32,6 +32,8 @@ $periodLabels = [
      data-label-resolution-time="<?php e(t('Resolution time')); ?>"
      data-label-top-customers="<?php e(t('Top customers')); ?>"
      data-label-top-categories="<?php e(t('Top categories')); ?>"
+     data-label-trend-up="<?php e(t('trend_tooltip_up')); ?>"
+     data-label-trend-down="<?php e(t('trend_tooltip_down')); ?>"
 >
   <section>
     <?php
diff --git a/modules/helpdesk/web/js/helpdesk-team.js b/modules/helpdesk/web/js/helpdesk-team.js
index 039c057..a4d2d65 100644
--- a/modules/helpdesk/web/js/helpdesk-team.js
+++ b/modules/helpdesk/web/js/helpdesk-team.js
@@ -12,6 +12,8 @@ if (container) {
   const labelCritical = container.dataset.labelCritical || 'Critical (>48h open)';
   const ticketBaseUrl = container.dataset.ticketBaseUrl || '';
   const debitorBaseUrl = container.dataset.debitorBaseUrl || '';
+  const labelTrendUp = container.dataset.labelTrendUp || 'Backlog growing';
+  const labelTrendDown = container.dataset.labelTrendDown || 'Backlog shrinking';
 
   const elLoading = document.getElementById('team-loading');
   const elError = document.getElementById('team-error');
@@ -116,7 +118,12 @@ if (container) {
     if (delta !== 0) {
       const arrow = delta > 0 ? '↑' : '↓';
       const cls = delta > 0 ? 'helpdesk-team-trend-up' : 'helpdesk-team-trend-down';
-      title.appendChild(h('span', cls, arrow + Math.abs(delta)));
+      const tooltip = delta > 0 ? labelTrendUp : labelTrendDown;
+      const trendEl = h('span', cls, arrow + Math.abs(delta));
+      trendEl.setAttribute('data-tooltip', tooltip);
+      trendEl.setAttribute('data-tooltip-pos', 'top');
+      trendEl.tabIndex = 0;
+      title.appendChild(trendEl);
     }
 
     section.appendChild(title);