domverse/ciaovolo
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add info icon tooltip for airport names in routes table

Browse Source 
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>
This commit is contained in:
domverse
2026-02-27 20:59:37 +01:00
parent ce1cf667d2
commit 0a2fed7465
1 changed files with 14 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

14
flight-comparator/frontend/src/pages/ScanDetails.tsx
View File

@@ -15,6 +15,7 @@ import {
Loader2, Loader2,
RotateCcw, RotateCcw,
Trash2, Trash2,
Info,
} from 'lucide-react'; } from 'lucide-react';
import { scanApi } from '../api'; import { scanApi } from '../api';
import type { Scan, Route, Flight } 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]"> <span className="text-sm text-on-surface-variant truncate max-w-[180px]">
{route.destination_name || route.destination_city || ''} {route.destination_name || route.destination_city || ''}
</span> </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> </div>
</td> </td>
{/* Flights */} {/* Flights */}