From b52d588fc59543ddac92055173596cfbeffe493b Mon Sep 17 00:00:00 2001
From: hsiegeln <37154749+hsiegeln@users.noreply.github.com>
Date: Thu, 26 Mar 2026 19:47:39 +0100
Subject: [PATCH] feat: add tooltips to tap attribute type selector buttons

Each type option now shows a descriptive tooltip on hover explaining
its purpose: Business Object (key identifiers), Correlation (cross-route
linking), Event (business events), Custom (general purpose).

Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
---
 ui/src/pages/Routes/RouteDetail.tsx | 11 ++++++-----
 1 file changed, 6 insertions(+), 5 deletions(-)

diff --git a/ui/src/pages/Routes/RouteDetail.tsx b/ui/src/pages/Routes/RouteDetail.tsx
index 70115519..574c075c 100644
--- a/ui/src/pages/Routes/RouteDetail.tsx
+++ b/ui/src/pages/Routes/RouteDetail.tsx
@@ -633,11 +633,11 @@ export default function RouteDetail() {
     { value: 'BOTH', label: 'Both' },
   ];
 
-  const typeChoices: Array<{ value: TapDefinition['attributeType']; label: string }> = [
-    { value: 'BUSINESS_OBJECT', label: 'Business Object' },
-    { value: 'CORRELATION', label: 'Correlation' },
-    { value: 'EVENT', label: 'Event' },
-    { value: 'CUSTOM', label: 'Custom' },
+  const typeChoices: Array<{ value: TapDefinition['attributeType']; label: string; tooltip: string }> = [
+    { value: 'BUSINESS_OBJECT', label: 'Business Object', tooltip: 'A key business identifier like orderId, customerId, or invoiceNumber' },
+    { value: 'CORRELATION', label: 'Correlation', tooltip: 'Used to correlate related exchanges across routes or services' },
+    { value: 'EVENT', label: 'Event', tooltip: 'Marks a business event occurrence like orderPlaced or paymentReceived' },
+    { value: 'CUSTOM', label: 'Custom', tooltip: 'General-purpose attribute for any other extraction need' },
   ];
 
   const recentExchangeOptions = useMemo(() =>
@@ -892,6 +892,7 @@ export default function RouteDetail() {
                 <button
                   key={tc.value}
                   type="button"
+                  title={tc.tooltip}
                   className={`${styles.typeOption} ${tapType === tc.value ? styles.typeOptionActive : ''}`}
                   onClick={() => setTapType(tc.value)}
                 >