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

@@ -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)}
                 >