From 0a2fed74652c1b7dbb363f7b3d01b09bdc6e5fea Mon Sep 17 00:00:00 2001
From: domverse <domverse@domverse-berlin.eu>
Date: Fri, 27 Feb 2026 20:59:37 +0100
Subject: [PATCH] feat: add info icon tooltip for airport names in routes table

Replaces the non-functional title attribute with a small Info icon
next to the IATA code badge. Hovering shows a dark tooltip with the
full airport name and city. Only rendered when useful name data exists.
Clicking the icon stops propagation so it doesn't expand the flights row.

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
---
 .../frontend/src/pages/ScanDetails.tsx             | 14 ++++++++++++++
 1 file changed, 14 insertions(+)

diff --git a/flight-comparator/frontend/src/pages/ScanDetails.tsx b/flight-comparator/frontend/src/pages/ScanDetails.tsx
index 94aa88a..4fec1a9 100644
--- a/flight-comparator/frontend/src/pages/ScanDetails.tsx
+++ b/flight-comparator/frontend/src/pages/ScanDetails.tsx
@@ -15,6 +15,7 @@ import {
   Loader2,
   RotateCcw,
   Trash2,
+  Info,
 } from 'lucide-react';
 import { scanApi } from '../api';
 import type { Scan, Route, Flight } from '../api';
@@ -419,6 +420,19 @@ export default function ScanDetails() {
                               <span className="text-sm text-on-surface-variant truncate max-w-[180px]">
                                 {route.destination_name || route.destination_city || ''}
                               </span>
+                              {/* Info icon + tooltip — only when useful name data exists */}
+                              {(route.destination_name && route.destination_name !== route.destination) || route.destination_city ? (
+                                <span
+                                  className="relative group/tip inline-flex shrink-0"
+                                  onClick={e => e.stopPropagation()}
+                                >
+                                  <Info size={12} className="text-on-surface-variant/40 hover:text-on-surface-variant/70 cursor-help transition-colors" />
+                                  <span className="pointer-events-none absolute bottom-full left-1/2 -translate-x-1/2 mb-2 z-50 invisible group-hover/tip:visible bg-gray-900 text-white text-xs rounded px-2 py-1 whitespace-nowrap shadow-lg">
+                                    {[route.destination_name, route.destination_city].filter(s => s && s !== route.destination).join(', ')}
+                                    <span className="absolute top-full left-1/2 -translate-x-1/2 border-4 border-transparent border-t-gray-900" />
+                                  </span>
+                                </span>
+                              ) : null}
                             </div>
                           </td>
                           {/* Flights */}