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>
This commit is contained in:
@@ -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 */}
|
||||
|
||||
Reference in New Issue
Block a user