From 3540ec15f34908780b416dd5558d88a09685a186 Mon Sep 17 00:00:00 2001
From: Florent Tapponnier <florent.tapponnier@gmail.com>
Date: Sat, 23 May 2026 16:12:53 +0200
Subject: [PATCH] feat: migrate hot-path tooltips from native title= to <Hint>
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

5 most-visible tooltip surfaces now use the Hint primitive instead of
the browser's default 800 ms title= popup:

- home-bench-table — provider initials chips on every home card
- benchmark-card — provider initials chips on the /benchmarks grid
- distribution-chart — p50 / p90 / p99 percentile markers
- ranked-bar-chart — provider name / tag row chip
- ledger-table — 'Currently unavailable' badge (had a 2-sentence
  paragraph stuffed inside a title= attribute, illegible)

Hint already shipped in the previous PR; this batch attaches it where
the design audit identified the worst UX gaps (provider chips were the
agent's #1 example: user sees a 'C' and has to wait 800 ms for the
browser to maybe show 'Coinbase'). 120 ms hover delay, instant on
focus, ink-on-paper styled - matches Stripe / Linear / Vercel
conventions for read-only dashboards.

Row-level tooltips (full <li> with methodologyTooltip) keep their
native title= for now - wrapping <li> in <Hint>'s <span> would
break <ul> semantics. Migrating those needs a small Hint asChild
pattern (radix-style cloneElement); deferred to a focused follow-up
PR if visible enough to warrant it.
---
 src/components/benchmark-card.tsx     | 13 ++++----
 src/components/distribution-chart.tsx | 48 +++++++++++++++------------
 src/components/home-bench-table.tsx   | 13 ++++----
 src/components/ledger-table.tsx       | 14 ++++----
 src/components/ranked-bar-chart.tsx   | 20 ++++++-----
 5 files changed, 57 insertions(+), 51 deletions(-)

diff --git a/src/components/benchmark-card.tsx b/src/components/benchmark-card.tsx
index 3fa532e2..739c8681 100644
--- a/src/components/benchmark-card.tsx
+++ b/src/components/benchmark-card.tsx
@@ -1,5 +1,6 @@
 import Link from "next/link";
 import type { Benchmark } from "@/types/benchmark";
+import { Hint } from "@/components/hint";
 import { MiniChart } from "@/components/mini-chart";
 import { CATEGORY_COLOR } from "@/lib/category-colors";
 import { fmtValue, unitSuffix } from "@/lib/format";
@@ -50,13 +51,11 @@ export function BenchmarkCard({ benchmark }: { benchmark: Benchmark }) {
         </div>
         <div className="flex items-center gap-1 shrink-0">
           {chips.map((r) => (
-            <span
-              key={r.slug}
-              title={r.name}
-              className="inline-flex items-center justify-center w-6 h-6 rounded-full border border-rule text-[10px] font-semibold text-ink-muted bg-surface"
-            >
-              {r.name.charAt(0).toUpperCase()}
-            </span>
+            <Hint key={r.slug} label={r.name}>
+              <span className="inline-flex items-center justify-center w-6 h-6 rounded-full border border-rule text-[10px] font-semibold text-ink-muted bg-surface">
+                {r.name.charAt(0).toUpperCase()}
+              </span>
+            </Hint>
           ))}
         </div>
       </div>
diff --git a/src/components/distribution-chart.tsx b/src/components/distribution-chart.tsx
index 46fb431a..14461ba6 100644
--- a/src/components/distribution-chart.tsx
+++ b/src/components/distribution-chart.tsx
@@ -3,6 +3,7 @@
 import { useMemo } from "react";
 import type { Benchmark } from "@/types/benchmark";
 import { liveResults } from "@/lib/provider-filters";
+import { Hint } from "@/components/hint";
 import { ProviderLogo } from "@/components/provider-logo";
 import { fmtUnit } from "@/lib/format";
 import { methodologyTooltip } from "@/lib/methodology-tooltip";
@@ -127,30 +128,33 @@ export function DistributionChart({
                       aria-hidden
                     />
                     {/* p99 — vertical bar, right edge of the spread */}
-                    <span
-                      className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-0.5 h-3.5 rounded-sm"
-                      style={{ left: `${p99Pct}%`, background: color }}
-                      title={`p99 ${fmtUnit(r.ms.p99, unit)}`}
-                      aria-label={`p99 ${fmtUnit(r.ms.p99, unit)}`}
-                    />
+                    <Hint label={`p99 ${fmtUnit(r.ms.p99, unit)}`}>
+                      <span
+                        className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-0.5 h-3.5 rounded-sm"
+                        style={{ left: `${p99Pct}%`, background: color }}
+                        aria-label={`p99 ${fmtUnit(r.ms.p99, unit)}`}
+                      />
+                    </Hint>
                     {/* p90 — outlined ring */}
-                    <span
-                      className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full"
-                      style={{
-                        left: `${p90Pct}%`,
-                        border: `1.5px solid ${color}`,
-                        background: "var(--color-paper)",
-                      }}
-                      title={`p90 ${fmtUnit(r.ms.p90, unit)}`}
-                      aria-label={`p90 ${fmtUnit(r.ms.p90, unit)}`}
-                    />
+                    <Hint label={`p90 ${fmtUnit(r.ms.p90, unit)}`}>
+                      <span
+                        className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-2.5 h-2.5 rounded-full"
+                        style={{
+                          left: `${p90Pct}%`,
+                          border: `1.5px solid ${color}`,
+                          background: "var(--color-paper)",
+                        }}
+                        aria-label={`p90 ${fmtUnit(r.ms.p90, unit)}`}
+                      />
+                    </Hint>
                     {/* p50 — filled dot, the headline */}
-                    <span
-                      className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full"
-                      style={{ background: color }}
-                      title={`p50 ${fmtUnit(r.ms.p50, unit)}`}
-                      aria-label={`p50 ${fmtUnit(r.ms.p50, unit)}`}
-                    />
+                    <Hint label={`p50 ${fmtUnit(r.ms.p50, unit)}`}>
+                      <span
+                        className="absolute top-1/2 -translate-y-1/2 -translate-x-1/2 w-3 h-3 rounded-full"
+                        style={{ background: color }}
+                        aria-label={`p50 ${fmtUnit(r.ms.p50, unit)}`}
+                      />
+                    </Hint>
                   </>
                 )}
               </div>
diff --git a/src/components/home-bench-table.tsx b/src/components/home-bench-table.tsx
index 8d1eb1f8..5a0f1b87 100644
--- a/src/components/home-bench-table.tsx
+++ b/src/components/home-bench-table.tsx
@@ -1,6 +1,7 @@
 import Link from "next/link";
 import { ArrowUpRight } from "lucide-react";
 import type { Benchmark } from "@/types/benchmark";
+import { Hint } from "@/components/hint";
 import { MiniChart } from "@/components/mini-chart";
 import { CATEGORY_COLOR } from "@/lib/category-colors";
 import { leader, fieldValue } from "@/lib/citation";
@@ -85,12 +86,12 @@ function BenchTitleCell({ b }: { b: Benchmark }) {
         </span>
         <ul className="flex items-center gap-1">
           {chips.map((c) => (
-            <li
-              key={c.slug}
-              className="inline-flex items-center justify-center w-5 h-5 rounded-full border border-rule bg-surface text-[9px] font-semibold text-ink-muted"
-              title={c.name}
-            >
-              {c.name.charAt(0)}
+            <li key={c.slug} className="inline-flex">
+              <Hint label={c.name}>
+                <span className="inline-flex items-center justify-center w-5 h-5 rounded-full border border-rule bg-surface text-[9px] font-semibold text-ink-muted">
+                  {c.name.charAt(0)}
+                </span>
+              </Hint>
             </li>
           ))}
         </ul>
diff --git a/src/components/ledger-table.tsx b/src/components/ledger-table.tsx
index 1a03b925..d6679d53 100644
--- a/src/components/ledger-table.tsx
+++ b/src/components/ledger-table.tsx
@@ -4,6 +4,7 @@ import { useMemo } from "react";
 
 import Link from "next/link";
 import type { Benchmark, ProviderResult } from "@/types/benchmark";
+import { Hint } from "@/components/hint";
 import { Sparkline } from "@/components/sparkline";
 import { ProviderLogo } from "@/components/provider-logo";
 import { ProviderTypeBadge } from "@/components/provider-type-badge";
@@ -201,13 +202,12 @@ function Row({
             </span>
           )}
           {isOffline && (
-            <span
-              className="inline-flex items-center gap-1 shrink-0 font-sans text-[10px] uppercase tracking-[0.14em] text-ink-muted"
-              title="No samples returned this cycle — provider or its upstream is currently unavailable. Values will reappear once data resumes."
-            >
-              <span className="inline-block w-1.5 h-1.5 rounded-full bg-[var(--color-warn,#c08a3c)]" aria-hidden />
-              Currently unavailable
-            </span>
+            <Hint label="No samples returned this cycle. Provider or its upstream is unavailable. Values reappear once data resumes.">
+              <span className="inline-flex items-center gap-1 shrink-0 font-sans text-[10px] uppercase tracking-[0.14em] text-ink-muted">
+                <span className="inline-block w-1.5 h-1.5 rounded-full bg-[var(--color-warn,#c08a3c)]" aria-hidden />
+                Currently unavailable
+              </span>
+            </Hint>
           )}
           {r.type && !isOffline && (
             <span className="hidden md:inline-flex">
diff --git a/src/components/ranked-bar-chart.tsx b/src/components/ranked-bar-chart.tsx
index f0f2be20..06ee0982 100644
--- a/src/components/ranked-bar-chart.tsx
+++ b/src/components/ranked-bar-chart.tsx
@@ -6,6 +6,7 @@ import { fmtUnit } from "@/lib/format";
 import { methodologyTooltip } from "@/lib/methodology-tooltip";
 import { buildProviderColors } from "@/lib/series-colors";
 import { useChartExclusion } from "@/hooks/use-chart-exclusion";
+import { Hint } from "@/components/hint";
 import { LiveDot } from "@/components/live-dot";
 import { ProviderLogo } from "@/components/provider-logo";
 
@@ -142,15 +143,16 @@ export function RankedBarChart({
               <span className="font-sans tabular text-[11px] text-ink-faint text-right">
                 {rank !== null ? `#${rank}` : "-"}
               </span>
-              <span
-                className={`inline-flex items-center gap-2 text-[13px] truncate ${
-                  isOff ? "text-ink-faint line-through decoration-1" : "text-ink"
-                }`}
-                title={r.tag}
-              >
-                <ProviderLogo slug={r.slug} name={r.name} size={18} />
-                <span className="truncate">{r.name}</span>
-              </span>
+              <Hint label={r.tag ?? r.name}>
+                <span
+                  className={`inline-flex items-center gap-2 text-[13px] truncate ${
+                    isOff ? "text-ink-faint line-through decoration-1" : "text-ink"
+                  }`}
+                >
+                  <ProviderLogo slug={r.slug} name={r.name} size={18} />
+                  <span className="truncate">{r.name}</span>
+                </span>
+              </Hint>
               <div className="relative h-7 bg-paper-soft/60 rounded-sm overflow-hidden">
                 <div
                   className="h-full rounded-sm transition-[width,opacity] duration-300"