From 5a18be86678fab5cf48eacb19382b1fca5d06df6 Mon Sep 17 00:00:00 2001
From: SaelixCode <dev@saelix.com>
Date: Fri, 3 Jul 2026 19:35:13 -0400
Subject: [PATCH] fix: replace native title tooltips with Radix tooltips on
 Security page

Converted scanner info icon, exploitability n/a badge, and scan
image button from native HTML title attributes to the shared Radix
Tooltip component.
---
 frontend/src/components/SecurityView.tsx      | 18 ++++++----
 .../src/components/security/ImagesTab.tsx     | 35 +++++++++++--------
 .../components/security/SecurityCharts.tsx    | 10 +++++-
 3 files changed, 41 insertions(+), 22 deletions(-)

diff --git a/frontend/src/components/SecurityView.tsx b/frontend/src/components/SecurityView.tsx
index b2dd89a8..7f3ed718 100644
--- a/frontend/src/components/SecurityView.tsx
+++ b/frontend/src/components/SecurityView.tsx
@@ -8,6 +8,7 @@ import { CapabilityGate } from '@/components/CapabilityGate';
 import { deriveMasthead, SCANNER_DETECTIONS_NOTE } from './security/securityMasthead';
 import { springs } from '@/lib/motion';
 import { apiFetch } from '@/lib/api';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { formatTimeAgo } from '@/lib/relativeTime';
 import { useAuth } from '@/context/AuthContext';
 import { useNodes } from '@/context/NodeContext';
@@ -237,13 +238,16 @@ export function SecurityView({ activeTab, onTabChange, headerActions }: Security
       <span>
         {overview.scannedImages} {overview.scannedImages === 1 ? 'image' : 'images'} scanned · scanner {overview.scanner.available ? 'ready' : 'not installed'}
       </span>
-      <span
-        className="inline-flex shrink-0 cursor-help text-stat-subtitle/70 hover:text-stat-subtitle"
-        title={SCANNER_DETECTIONS_NOTE}
-        aria-label={SCANNER_DETECTIONS_NOTE}
-      >
-        <Info className="h-3 w-3" strokeWidth={1.5} aria-hidden="true" />
-      </span>
+      <TooltipProvider>
+        <Tooltip>
+          <TooltipTrigger asChild>
+            <span className="inline-flex shrink-0 cursor-help text-stat-subtitle/70 hover:text-stat-subtitle">
+              <Info className="h-3 w-3" strokeWidth={1.5} aria-hidden="true" />
+            </span>
+          </TooltipTrigger>
+          <TooltipContent className="max-w-[260px]">{SCANNER_DETECTIONS_NOTE}</TooltipContent>
+        </Tooltip>
+      </TooltipProvider>
     </span>
   ) : undefined;
 
diff --git a/frontend/src/components/security/ImagesTab.tsx b/frontend/src/components/security/ImagesTab.tsx
index bc056a7d..fc94966e 100644
--- a/frontend/src/components/security/ImagesTab.tsx
+++ b/frontend/src/components/security/ImagesTab.tsx
@@ -7,6 +7,7 @@ import { Combobox } from '@/components/ui/combobox';
 import { ScrollArea } from '@/components/ui/scroll-area';
 import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from '@/components/ui/table';
 import { DropdownMenu, DropdownMenuContent, DropdownMenuItem, DropdownMenuTrigger } from '@/components/ui/dropdown-menu';
+import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '@/components/ui/tooltip';
 import { SeverityBadge } from '@/components/ui/SeverityBadge';
 import { getSeverityKey, type SeverityKey, type ImageFilterValue } from '@/lib/severityStyles';
 import { formatTimeAgo } from '@/lib/relativeTime';
@@ -255,20 +256,26 @@ export function ImagesTab({ summaries, loading, error, onInspect, canScan, scann
                   {canScan && (
                     <TableCell className="text-right">
                       <DropdownMenu>
-                        <DropdownMenuTrigger asChild>
-                          <Button
-                            variant="ghost"
-                            size="icon"
-                            className="h-7 w-7 text-muted-foreground hover:text-foreground transition-colors"
-                            disabled={scanningRef === s.image_ref}
-                            title="Scan image"
-                            aria-label={`Scan ${s.image_ref}`}
-                          >
-                            {scanningRef === s.image_ref
-                              ? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} />
-                              : <ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />}
-                          </Button>
-                        </DropdownMenuTrigger>
+                        <TooltipProvider>
+                          <Tooltip>
+                            <TooltipTrigger asChild>
+                              <DropdownMenuTrigger asChild>
+                                <Button
+                                  variant="ghost"
+                                  size="icon"
+                                  className="h-7 w-7 text-muted-foreground hover:text-foreground transition-colors"
+                                  disabled={scanningRef === s.image_ref}
+                                  aria-label={`Scan ${s.image_ref}`}
+                                >
+                                  {scanningRef === s.image_ref
+                                    ? <Loader2 className="w-3.5 h-3.5 animate-spin" strokeWidth={1.5} />
+                                    : <ShieldCheck className="w-3.5 h-3.5" strokeWidth={1.5} />}
+                                </Button>
+                              </DropdownMenuTrigger>
+                            </TooltipTrigger>
+                            <TooltipContent>Scan image</TooltipContent>
+                          </Tooltip>
+                        </TooltipProvider>
                         <DropdownMenuContent align="end">
                           <DropdownMenuItem onClick={() => onScan(s.image_ref, ['vuln'])}>
                             Scan (vulnerabilities)
diff --git a/frontend/src/components/security/SecurityCharts.tsx b/frontend/src/components/security/SecurityCharts.tsx
index 229625c6..faf30f1d 100644
--- a/frontend/src/components/security/SecurityCharts.tsx
+++ b/frontend/src/components/security/SecurityCharts.tsx
@@ -8,6 +8,7 @@ import { ChartContainer, ChartTooltip, ChartTooltipContent, type ChartConfig } f
 import { Button } from '@/components/ui/button';
 import { useChartStyle, type ChartStyle } from '@/hooks/use-theme';
 import { cn } from '@/lib/utils';
+import { TooltipProvider, Tooltip as RadixTooltip, TooltipTrigger, TooltipContent } from '@/components/ui/tooltip';
 import type { SecurityRiskTrendPoint, SecurityOverview, ExploitIntelFinding } from '@/types/security';
 
 // Severity colours resolve through the --sev-* tokens, which the appearance
@@ -260,7 +261,14 @@ export function TopExploitRiskList({
                   {f.epss_score !== null ? (
                     <span className="text-warning">{Math.round(f.epss_score * 100)}%</span>
                   ) : (
-                    <span className="text-stat-subtitle/70" title="Exploitability unrated; treated as potentially automatable">n/a</span>
+                    <TooltipProvider>
+                      <RadixTooltip>
+                        <TooltipTrigger asChild>
+                          <span className="text-stat-subtitle/70 cursor-help">n/a</span>
+                        </TooltipTrigger>
+                        <TooltipContent>Exploitability unrated; treated as potentially automatable</TooltipContent>
+                      </RadixTooltip>
+                    </TooltipProvider>
                   )}
                 </span>
                 <span className="text-right font-mono text-[11px] tabular-nums text-stat-subtitle">