feat(ui): converts all remaining native title attrs to Tooltip

wgordon17 · wgordon17 · commit b4d727d97784 · 2026-04-07T08:41:42.000-04:00
diff --git a/src/app/components/dashboard/IgnoreBadge.tsx b/src/app/components/dashboard/IgnoreBadge.tsx
@@ -1,5 +1,6 @@
 import { createSignal, For, Show } from "solid-js";
 import type { IgnoredItem } from "../../stores/view";
+import { Tooltip } from "../shared/Tooltip";
 
 interface IgnoreBadgeProps {
   items: IgnoredItem[];
@@ -84,9 +85,11 @@ export default function IgnoreBadge(props: IgnoreBadgeProps) {
                       <p class="text-xs text-base-content/60 truncate">
                         {item.repo}
                       </p>
-                      <p class="text-sm text-base-content truncate" title={item.title}>
-                        {item.title}
-                      </p>
+                      <Tooltip content={item.title}>
+                        <p class="text-sm text-base-content truncate">
+                          {item.title}
+                        </p>
+                      </Tooltip>
                       <p class="text-xs text-base-content/40">
                         Ignored {formatDate(item.ignoredAt)}
                       </p>
diff --git a/src/app/components/dashboard/ItemRow.tsx b/src/app/components/dashboard/ItemRow.tsx
@@ -3,6 +3,7 @@ import { isSafeGitHubUrl } from "../../lib/url";
 import { relativeTime, shortRelativeTime, formatCount } from "../../lib/format";
 import { expandEmoji } from "../../lib/emoji";
 import { labelColorClass } from "../../lib/label-colors";
+import { Tooltip } from "../shared/Tooltip";
 
 export interface ItemRowProps {
   repo: string;
@@ -78,14 +79,15 @@ export default function ItemRow(props: ItemRowProps) {
 
       {/* Repo badge */}
       <Show when={!props.hideRepo}>
-        <span
-          class={`shrink-0 inline-flex items-center rounded-full font-mono font-medium
-            bg-primary/10 text-primary
-            ${isCompact() ? "text-xs px-2 py-0.5" : "text-xs px-2.5 py-1"}`}
-          title={props.repo}
-        >
-          {props.repo}
-        </span>
+        <Tooltip content={props.repo} class="relative z-10">
+          <span
+            class={`shrink-0 inline-flex items-center rounded-full font-mono font-medium
+              bg-primary/10 text-primary
+              ${isCompact() ? "text-xs px-2 py-0.5" : "text-xs px-2.5 py-1"}`}
+          >
+            {props.repo}
+          </span>
+        </Tooltip>
       </Show>
 
       {/* Main content */}
@@ -127,22 +129,24 @@ export default function ItemRow(props: ItemRowProps) {
           <div class="relative z-10">{props.surfacedByBadge}</div>
         </Show>
         <span class="inline-flex items-center gap-1 whitespace-nowrap">
-          <time
-            datetime={props.createdAt}
-            title={staticDateInfo().createdTitle}
-            aria-label={dateDisplay().createdLabel}
-          >
-            {dateDisplay().created}
-          </time>
-          <Show when={shouldShowUpdated()}>
-            <span aria-hidden="true">{"\u00B7"}</span>
+          <Tooltip content={staticDateInfo().createdTitle} class="relative z-10">
             <time
-              datetime={props.updatedAt}
-              title={staticDateInfo().updatedTitle}
-              aria-label={dateDisplay().updatedLabel}
+              datetime={props.createdAt}
+              aria-label={dateDisplay().createdLabel}
             >
-              {dateDisplay().updated}
+              {dateDisplay().created}
             </time>
+          </Tooltip>
+          <Show when={shouldShowUpdated()}>
+            <span aria-hidden="true">{"\u00B7"}</span>
+            <Tooltip content={staticDateInfo().updatedTitle} class="relative z-10">
+              <time
+                datetime={props.updatedAt}
+                aria-label={dateDisplay().updatedLabel}
+              >
+                {dateDisplay().updated}
+              </time>
+            </Tooltip>
           </Show>
         </span>
         <Show when={props.isPolling}>
@@ -169,33 +173,34 @@ export default function ItemRow(props: ItemRowProps) {
       </div>
 
       {/* Ignore button — visible on hover */}
-      <button
-        data-ignore-btn
-        onClick={() => props.onIgnore()}
-        class={`relative z-10 shrink-0 self-center rounded p-1
-          text-base-content/30
-          hover:text-error
-          opacity-0 group-hover:opacity-100 focus:opacity-100
-          transition-opacity focus:outline-none focus:ring-2 focus:ring-error`}
-        title="Ignore this item"
-        aria-label={`Ignore #${props.number} ${props.title}`}
-      >
-        {/* Eye-slash icon */}
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class={isCompact() ? "h-3.5 w-3.5" : "h-4 w-4"}
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+      <Tooltip content="Ignore" class="relative z-10">
+        <button
+          data-ignore-btn
+          onClick={() => props.onIgnore()}
+          class={`shrink-0 self-center rounded p-1
+            text-base-content/30
+            hover:text-error
+            opacity-0 group-hover:opacity-100 focus:opacity-100
+            transition-opacity focus:outline-none focus:ring-2 focus:ring-error`}
+          aria-label={`Ignore #${props.number} ${props.title}`}
         >
-          <path
-            fill-rule="evenodd"
-            d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-            clip-rule="evenodd"
-          />
-          <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-        </svg>
-      </button>
+          {/* Eye-slash icon */}
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class={isCompact() ? "h-3.5 w-3.5" : "h-4 w-4"}
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+              clip-rule="evenodd"
+            />
+            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+          </svg>
+        </button>
+      </Tooltip>
     </div>
   );
 }
diff --git a/src/app/components/dashboard/PullRequestsTab.tsx b/src/app/components/dashboard/PullRequestsTab.tsx
@@ -608,11 +608,13 @@ export default function PullRequestsTab(props: PullRequestsTabProps) {
                                     </span>
                                   </Show>
                                   <Show when={pr.enriched !== false && pr.reviewerLogins.length > 0}>
-                                    <span class="text-xs text-base-content/60" title={pr.reviewerLogins.join(", ")}>
-                                      Reviewers: {pr.reviewerLogins.slice(0, 5).join(", ")}
-                                      {pr.reviewerLogins.length > 5 && ` +${pr.reviewerLogins.length - 5} more`}
-                                      {pr.totalReviewCount > pr.reviewerLogins.length && ` (${pr.totalReviewCount} total)`}
-                                    </span>
+                                    <Tooltip content={pr.reviewerLogins.join(", ")} focusable>
+                                      <span class="text-xs text-base-content/60">
+                                        Reviewers: {pr.reviewerLogins.slice(0, 5).join(", ")}
+                                        {pr.reviewerLogins.length > 5 && ` +${pr.reviewerLogins.length - 5} more`}
+                                        {pr.totalReviewCount > pr.reviewerLogins.length && ` (${pr.totalReviewCount} total)`}
+                                      </span>
+                                    </Tooltip>
                                   </Show>
                                 </div>
                               </ItemRow>
diff --git a/src/app/components/dashboard/WorkflowRunRow.tsx b/src/app/components/dashboard/WorkflowRunRow.tsx
@@ -3,6 +3,7 @@ import type { WorkflowRun } from "../../services/api";
 import type { Config } from "../../stores/config";
 import { isSafeGitHubUrl } from "../../lib/url";
 import { relativeTime, formatDuration } from "../../lib/format";
+import { Tooltip } from "../shared/Tooltip";
 
 interface WorkflowRunRowProps {
   run: WorkflowRun;
@@ -182,39 +183,41 @@ export default function WorkflowRunRow(props: WorkflowRunRowProps) {
         {durationLabel(props.run)}
       </span>
 
-      <time
-        class="text-xs text-base-content/40 shrink-0"
-        datetime={props.run.createdAt}
-        title={createdTitle()}
-      >
-        {timeLabel()}
-      </time>
+      <Tooltip content={createdTitle()}>
+        <time
+          class="text-xs text-base-content/40 shrink-0"
+          datetime={props.run.createdAt}
+        >
+          {timeLabel()}
+        </time>
+      </Tooltip>
 
       <Show when={props.isPolling}>
         <span class="loading loading-spinner loading-xs text-base-content/40" />
       </Show>
 
-      <button
-        onClick={() => props.onIgnore(props.run)}
-        class="shrink-0 rounded p-1 text-base-content/30 hover:text-error opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-error"
-        title="Ignore this run"
-        aria-label={`Ignore run ${props.run.name}`}
-      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          class="h-4 w-4"
-          viewBox="0 0 20 20"
-          fill="currentColor"
-          aria-hidden="true"
+      <Tooltip content="Ignore">
+        <button
+          onClick={() => props.onIgnore(props.run)}
+          class="shrink-0 rounded p-1 text-base-content/30 hover:text-error opacity-0 group-hover:opacity-100 focus:opacity-100 transition-opacity focus:outline-none focus:ring-2 focus:ring-error"
+          aria-label={`Ignore run ${props.run.name}`}
         >
-          <path
-            fill-rule="evenodd"
-            d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
-            clip-rule="evenodd"
-          />
-          <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
-        </svg>
-      </button>
+          <svg
+            xmlns="http://www.w3.org/2000/svg"
+            class="h-4 w-4"
+            viewBox="0 0 20 20"
+            fill="currentColor"
+            aria-hidden="true"
+          >
+            <path
+              fill-rule="evenodd"
+              d="M3.707 2.293a1 1 0 00-1.414 1.414l14 14a1 1 0 001.414-1.414l-1.473-1.473A10.014 10.014 0 0019.542 10C18.268 5.943 14.478 3 10 3a9.958 9.958 0 00-4.512 1.074l-1.78-1.781zm4.261 4.26l1.514 1.515a2.003 2.003 0 012.45 2.45l1.514 1.514a4 4 0 00-5.478-5.478z"
+              clip-rule="evenodd"
+            />
+            <path d="M12.454 16.697L9.75 13.992a4 4 0 01-3.742-3.741L2.335 6.578A9.98 9.98 0 00.458 10c1.274 4.057 5.065 7 9.542 7 .847 0 1.669-.105 2.454-.303z" />
+          </svg>
+        </button>
+      </Tooltip>
     </div>
   );
 }
diff --git a/src/app/components/dashboard/WorkflowSummaryCard.tsx b/src/app/components/dashboard/WorkflowSummaryCard.tsx
@@ -1,6 +1,7 @@
 import { createMemo, For, Show } from "solid-js";
 import type { WorkflowRun } from "../../services/api";
 import WorkflowRunRow from "./WorkflowRunRow";
+import { Tooltip } from "../shared/Tooltip";
 
 interface WorkflowSummaryCardProps {
   workflowName: string;
@@ -81,19 +82,25 @@ export default function WorkflowSummaryCard(props: WorkflowSummaryCardProps) {
         </span>
         <div class="flex items-center gap-1.5 shrink-0">
           <Show when={counts().success > 0}>
-            <span class="text-xs font-medium text-success" title={`${counts().success} successful`} aria-label={`${counts().success} successful`}>
-              {counts().success}
-            </span>
+            <Tooltip content={`${counts().success} successful`} focusable>
+              <span class="text-xs font-medium text-success" aria-label={`${counts().success} successful`}>
+                {counts().success}
+              </span>
+            </Tooltip>
           </Show>
           <Show when={counts().failure > 0}>
-            <span class="text-xs font-medium text-error" title={`${counts().failure} failed`} aria-label={`${counts().failure} failed`}>
-              {counts().failure}
-            </span>
+            <Tooltip content={`${counts().failure} failed`} focusable>
+              <span class="text-xs font-medium text-error" aria-label={`${counts().failure} failed`}>
+                {counts().failure}
+              </span>
+            </Tooltip>
           </Show>
           <Show when={counts().running > 0}>
-            <span class="text-xs font-medium text-warning" title={`${counts().running} running`} aria-label={`${counts().running} running`}>
-              {counts().running}
-            </span>
+            <Tooltip content={`${counts().running} running`} focusable>
+              <span class="text-xs font-medium text-warning" aria-label={`${counts().running} running`}>
+                {counts().running}
+              </span>
+            </Tooltip>
           </Show>
         </div>
       </div>
diff --git a/src/app/components/shared/RepoGitHubLink.tsx b/src/app/components/shared/RepoGitHubLink.tsx
@@ -1,4 +1,5 @@
 import ExternalLinkIcon from "./ExternalLinkIcon";
+import { Tooltip } from "./Tooltip";
 
 const sectionLabels = {
   issues: "issues",
@@ -13,15 +14,16 @@ export default function RepoGitHubLink(props: {
   const label = () => sectionLabels[props.section];
 
   return (
-    <a
-      href={`https://github.com/${props.repoFullName}/${props.section}`}
-      target="_blank"
-      rel="noopener noreferrer"
-      class="opacity-0 group-hover/repo-header:opacity-100 focus-visible:opacity-100 transition-opacity text-base-content/40 hover:text-primary px-1"
-      title={`Open ${props.repoFullName} ${label()} on GitHub`}
-      aria-label={`Open ${props.repoFullName} ${label()} on GitHub`}
-    >
-      <ExternalLinkIcon />
-    </a>
+    <Tooltip content={`Open ${props.repoFullName} ${label()} on GitHub`}>
+      <a
+        href={`https://github.com/${props.repoFullName}/${props.section}`}
+        target="_blank"
+        rel="noopener noreferrer"
+        class="opacity-0 group-hover/repo-header:opacity-100 focus-visible:opacity-100 transition-opacity text-base-content/40 hover:text-primary px-1"
+        aria-label={`Open ${props.repoFullName} ${label()} on GitHub`}
+      >
+        <ExternalLinkIcon />
+      </a>
+    </Tooltip>
   );
 }
diff --git a/src/app/components/shared/Tooltip.tsx b/src/app/components/shared/Tooltip.tsx
@@ -10,6 +10,7 @@ interface TooltipProps {
   content: string;
   placement?: "top" | "bottom" | "left" | "right";
   focusable?: boolean;
+  class?: string;
   children: JSX.Element;
 }
 
@@ -42,7 +43,7 @@ export function Tooltip(props: TooltipProps) {
     >
       <KobalteTooltip.Trigger
         as="span"
-        class="inline-flex items-center"
+        class={`inline-flex items-center${props.class ? ` ${props.class}` : ""}`}
         tabindex={props.focusable ? "0" : undefined}
         onPointerEnter={() => {
           clearTimeout(hoverTimer);
diff --git a/tests/components/ItemRow.test.tsx b/tests/components/ItemRow.test.tsx
@@ -104,8 +104,10 @@ describe("ItemRow", () => {
   it("ignore button has relative z-10 to sit above overlay link", () => {
     render(() => <ItemRow {...defaultProps} />);
     const ignoreBtn = screen.getByLabelText(/Ignore #42/i);
-    expect(ignoreBtn.className).toContain("relative");
-    expect(ignoreBtn.className).toContain("z-10");
+    // The Tooltip wrapper span carries relative z-10; the button itself is inside it
+    const tooltipTrigger = ignoreBtn.closest("span.relative");
+    expect(tooltipTrigger).not.toBeNull();
+    expect(tooltipTrigger!.className).toContain("z-10");
   });
 
   it("applies compact padding in compact density", () => {
@@ -180,9 +182,7 @@ describe("ItemRow", () => {
     const created = container.querySelector(`time[datetime="${defaultProps.createdAt}"]`);
     const updated = container.querySelector(`time[datetime="${defaultProps.updatedAt}"]`);
     expect(created!.textContent).toBe("2h");
-    expect(created!.getAttribute("title")).toBe(`Created: ${new Date(defaultProps.createdAt).toLocaleString()}`);
     expect(updated!.textContent).toBe("30m");
-    expect(updated!.getAttribute("title")).toBe(`Updated: ${new Date(defaultProps.updatedAt).toLocaleString()}`);
     // Middle dot separator is a <span> with aria-hidden
     const dot = container.querySelector('span[aria-hidden="true"]');
     expect(dot).not.toBeNull();
diff --git a/tests/components/WorkflowRunRow.test.tsx b/tests/components/WorkflowRunRow.test.tsx
@@ -36,7 +36,6 @@ describe("WorkflowRunRow", () => {
     const timeEl = container.querySelector("time");
     expect(timeEl).not.toBeNull();
     expect(timeEl!.getAttribute("datetime")).toBe(createdAt);
-    expect(timeEl!.getAttribute("title")).toBe(`Created: ${new Date(createdAt).toLocaleString()}`);
     expect(timeEl!.textContent).toMatch(/2 hours? ago/);
   });
 
