@stigmer/react 3.11.0 → 3.11.1-dev.20260812192248

package/src/execution/__tests__/artifact-row-tooltips.layout.test.tsx

@@ -0,0 +1,115 @@
+// The interactive-trigger tooltip contract from the native-title sweep
+// (stigmer-cloud#268), pinned in a real Chromium on ArtifactRowView. When
+// an enabled control is its own tooltip trigger, keyboard FOCUS opens the
+// hint too — the concrete accessibility gain over the native `title` this
+// replaced, which no keyboard user ever saw. Focus-open is real focus
+// machinery (Base UI opens on focus-visible), so only a real browser can
+// pin it honestly.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import { ArtifactRowView } from "../ArtifactRowView.js";
+
+const ITEM = {
+  name: "report.pdf",
+  tooltip: "/workspace/output/report.pdf",
+  subtitlePath: null,
+  sizeBytes: 2048,
+  isDirectory: false,
+};
+
+function renderRow() {
+  const pane = document.createElement("div");
+  pane.className = "stgm";
+  pane.style.width = "320px";
+  document.body.appendChild(pane);
+  render(
+    <ul>
+      <ArtifactRowView
+        item={ITEM}
+        onOpen={() => {}}
+        onDownload={() => {}}
+        isDownloading={false}
+      />
+    </ul>,
+    { container: pane },
+  );
+  return pane;
+}
+
+function portaledText(pane: HTMLElement): string {
+  return Array.from(document.body.children)
+    .filter((node) => node !== pane)
+    .map((node) => node.textContent ?? "")
+    .join(" ");
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("ArtifactRowView tooltips", () => {
+  it("opens the full-path hint on keyboard focus — no pointer required", async () => {
+    const pane = renderRow();
+    expect(pane.querySelector("[title]")).toBeNull();
+
+    // Tab reaches the open button (first focusable in the row); the
+    // tooltip must follow focus per the interactive-trigger pattern.
+    await userEvent.tab();
+    const openButton = Array.from(pane.querySelectorAll("button")).find((el) =>
+      el.textContent?.includes("report.pdf"),
+    );
+    expect(document.activeElement).toBe(openButton);
+
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("/workspace/output/report.pdf"),
+      { timeout: 3000, interval: 50 },
+    );
+  });
+
+  it("keeps the download hint hoverable through the wrapper span", async () => {
+    const pane = renderRow();
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download report.pdf",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+
+  it("says 'Download ZIP' for a directory", async () => {
+    const pane = document.createElement("div");
+    pane.className = "stgm";
+    pane.style.width = "320px";
+    document.body.appendChild(pane);
+    render(
+      <ul>
+        <ArtifactRowView
+          item={{ ...ITEM, name: "bundle", tooltip: "bundle", isDirectory: true }}
+          onOpen={() => {}}
+          onDownload={() => {}}
+          isDownloading={false}
+        />
+      </ul>,
+      { container: pane },
+    );
+
+    const download = Array.from(pane.querySelectorAll("button")).find(
+      (el) => el.getAttribute("aria-label") === "Download bundle",
+    );
+    await userEvent.hover(download!.parentElement!);
+    await vi.waitFor(
+      () => expect(portaledText(pane)).toContain("Download ZIP"),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(download!.parentElement!);
+  });
+});

package/src/execution/artifact-row-item.ts

@@ -19,7 +19,7 @@ import type { Artifact } from "@stigmer/protos/ai/stigmer/agentic/artifact/v1/ap
 export interface ArtifactRowItem {
   /** Display label (file or directory name). */
   readonly name: string;
-  /** Hover title — the fullest location/name known for the artifact. */
+  /** House-tooltip content — the fullest location/name known for the artifact. */
   readonly tooltip: string;
   /**
    * Disambiguation subtitle rendered after the name when another row shares

package/src/file-reference/FileReferenceChipList.tsx

@@ -1,6 +1,7 @@
 "use client";
 
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /** Props for {@link FileReferenceChipList}. */
 export interface FileReferenceChipListProps {
@@ -83,24 +84,35 @@ function FileReferenceChip({
   const filename = path.split("/").pop() ?? path;
 
   return (
-    <span
-      role="listitem"
-      aria-label={`Referenced file: ${path}`}
-      title={path}
-      className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
-    >
-      <FileRefIcon />
-      <span className="stg:truncate">{filename}</span>
-      <button
-        type="button"
-        onClick={onRemove}
-        disabled={disabled}
-        className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
-        aria-label={`Remove reference to ${path}`}
+    // The chip shows only the basename; the tooltip restores the full path,
+    // so it is a hover-always hint on the chip, not an overflow-gated
+    // TruncatedText.
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            role="listitem"
+            aria-label={`Referenced file: ${path}`}
+            className="stg:inline-flex stg:max-w-[200px] stg:items-center stg:gap-1 stg:rounded-md stg:bg-muted-subtle stg:px-2 stg:py-0.5 stg:text-xs stg:text-foreground"
+          />
+        }
       >
-        <XIcon />
-      </button>
-    </span>
+        <FileRefIcon />
+        <span className="stg:truncate">{filename}</span>
+        <button
+          type="button"
+          onClick={onRemove}
+          disabled={disabled}
+          className="stg:ml-0.5 stg:shrink-0 stg:text-muted-foreground stg:hover:text-destructive stg:disabled:pointer-events-none"
+          aria-label={`Remove reference to ${path}`}
+        >
+          <XIcon />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent side="top" className="stg:break-all">
+        {path}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/file-reference/__tests__/FileReferenceChipList.test.tsx

@@ -80,7 +80,7 @@ describe("FileReferenceChipList", () => {
     expect(list.getAttribute("aria-label")).toBe("Referenced workspace files");
   });
 
-  it("sets title attribute on chip for full path tooltip", () => {
+  it("keeps the chip free of native titles — the full path rides the house tooltip", () => {
     render(
       <FileReferenceChipList
         refs={["src/deeply/nested/file.ts"]}
@@ -89,6 +89,9 @@ describe("FileReferenceChipList", () => {
     );
 
     const item = screen.getByRole("listitem");
-    expect(item.getAttribute("title")).toBe("src/deeply/nested/file.ts");
+    expect(item.getAttribute("title")).toBeNull();
+    // The basename stays visible; the full path is the tooltip's content
+    // (reveal pinned in the real-browser suites).
+    expect(item.textContent).toContain("file.ts");
   });
 });

package/src/iam-policy/OrgMembersPanel.tsx

@@ -15,6 +15,7 @@ import {
   iamRoleFromString,
   iamRoleToString,
 } from "@stigmer/sdk";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useResourceAccess } from "./useResourceAccess.js";
 import { usePrincipalsCount } from "./usePrincipalsCount.js";
 import { useWhoAmI } from "./useWhoAmI.js";
@@ -282,26 +283,32 @@ function MemberRow({
 function RoleBadge({ grant }: { grant: RoleGrant }) {
   const roleName = grant.role?.name || grant.role?.code || "Unknown";
   return (
-    <span
-      className={cn(
-        "stg:inline-flex stg:items-center stg:rounded-md stg:border stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
-        grant.isInherited
-          ? "stg:border-border-muted stg:text-muted-foreground stg:bg-muted-subtle stg:italic"
-          : "stg:border-border stg:bg-muted stg:text-foreground",
-      )}
-      title={
-        grant.isInherited
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "stg:inline-flex stg:items-center stg:rounded-md stg:border stg:px-2 stg:py-0.5 stg:text-[0.65rem] stg:font-medium",
+              grant.isInherited
+                ? "stg:border-border-muted stg:text-muted-foreground stg:bg-muted-subtle stg:italic"
+                : "stg:border-border stg:bg-muted stg:text-foreground",
+            )}
+          />
+        }
+      >
+        {roleName}
+        {grant.isInherited && (
+          <span className="stg:ml-1 stg:text-[0.55rem] stg:text-muted-foreground">
+            (inherited)
+          </span>
+        )}
+      </TooltipTrigger>
+      <TooltipContent side="top">
+        {grant.isInherited
           ? `Inherited from ${grant.ownerResource?.kind ?? "parent"}`
-          : `Directly assigned`
-      }
-    >
-      {roleName}
-      {grant.isInherited && (
-        <span className="stg:ml-1 stg:text-[0.55rem] stg:text-muted-foreground">
-          (inherited)
-        </span>
-      )}
-    </span>
+          : `Directly assigned`}
+      </TooltipContent>
+    </Tooltip>
   );
 }
 

package/src/iam-policy/ProviderBadge.tsx

@@ -2,6 +2,7 @@
 
 import type { ApiResourceRefView } from "@stigmer/protos/ai/stigmer/iam/iampolicy/v1/io_pb";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 
 /**
  * The human-readable identity-source label for a principal, or `""` when none
@@ -39,15 +40,21 @@ export function ProviderBadge({ principal, className }: ProviderBadgeProps) {
   }
 
   return (
-    <span
-      className={cn(
-        "stg:inline-flex stg:items-center stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
-        "stg:bg-muted-subtle stg:text-muted-foreground",
-        className,
-      )}
-      title={`Identity provider: ${label}`}
-    >
-      {label}
-    </span>
+    <Tooltip>
+      <TooltipTrigger
+        render={
+          <span
+            className={cn(
+              "stg:inline-flex stg:items-center stg:rounded stg:px-1.5 stg:py-0.5 stg:text-[0.6rem] stg:font-medium",
+              "stg:bg-muted-subtle stg:text-muted-foreground",
+              className,
+            )}
+          />
+        }
+      >
+        {label}
+      </TooltipTrigger>
+      <TooltipContent side="top">{`Identity provider: ${label}`}</TooltipContent>
+    </Tooltip>
   );
 }

package/src/iam-policy/RoleSelector.tsx

@@ -74,7 +74,6 @@ export function RoleSelector({
           return (
             <label
               key={opt.value}
-              title={opt.description}
               className={cn(
                 "stg:inline-flex stg:cursor-pointer stg:flex-col stg:rounded-md stg:border stg:px-3 stg:py-1.5 stg:text-xs stg:transition-colors",
                 isChecked

package/src/identity-provider/IdentityProviderListPanel.tsx

@@ -5,6 +5,7 @@ import { cn } from "@stigmer/theme";
 import { getUserMessage } from "@stigmer/sdk";
 import { timestampDate } from "@bufbuild/protobuf/wkt";
 import type { IdentityProvider } from "@stigmer/protos/ai/stigmer/iam/identityprovider/v1/api_pb";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { useIdentityProviderList } from "./useIdentityProviderList.js";
 import { useDeleteIdentityProvider } from "./useDeleteIdentityProvider.js";
 
@@ -246,9 +247,16 @@ function IdpRow({
           </span>
         )}
         {createdAt && (
-          <span title={`Created ${timestampDate(createdAt).toISOString()}`}>
-            {formatShortDate(timestampDate(createdAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={<time dateTime={timestampDate(createdAt).toISOString()} />}
+            >
+              {formatShortDate(timestampDate(createdAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {`Created ${timestampDate(createdAt).toISOString()}`}
+            </TooltipContent>
+          </Tooltip>
         )}
       </div>
 

package/src/internal/__tests__/truncated-text.layout.test.tsx

@@ -0,0 +1,68 @@
+// TruncatedText's overflow gating in a real Chromium (stigmer-cloud#268).
+// The native `title` idiom this helper replaced fired whether or not the
+// text was actually clipped; the helper opens the house tooltip ONLY when
+// CSS truncation really happened. That distinction is a layout fact —
+// happy-dom reports zero geometry — so only a real browser can pin it.
+
+import "../../../dist/styles.css";
+
+import { describe, it, expect, vi, afterEach } from "vitest";
+import { render, cleanup } from "@testing-library/react";
+import { userEvent } from "@vitest/browser/context";
+import type { ReactElement } from "react";
+import { TruncatedText } from "../truncated-text.js";
+
+const LONG = "a-very-long-model-identifier/that-cannot-fit-in-eighty-pixels";
+const SHORT = "fits";
+
+/** A themed, hard-sized cell so truncation geometry is real. */
+function renderInCell(ui: ReactElement, width: string) {
+  const cell = document.createElement("div");
+  cell.className = "stgm";
+  cell.style.width = width;
+  cell.style.display = "block";
+  document.body.appendChild(cell);
+  render(ui, { container: cell });
+  return cell;
+}
+
+function portaledText(cell: HTMLElement): string {
+  return Array.from(document.body.children)
+    .filter((node) => node !== cell)
+    .map((node) => node.textContent ?? "")
+    .join(" ");
+}
+
+afterEach(() => {
+  cleanup();
+  document.querySelectorAll(".stgm").forEach((node) => node.remove());
+});
+
+describe("TruncatedText overflow gating", () => {
+  it("reveals the full value on hover when the text is actually clipped", async () => {
+    const cell = renderInCell(<TruncatedText text={LONG} />, "80px");
+    expect(cell.querySelector("[title]")).toBeNull();
+
+    const span = cell.querySelector("span");
+    expect(span!.scrollWidth).toBeGreaterThan(span!.clientWidth);
+
+    await userEvent.hover(span!);
+    await vi.waitFor(
+      () => expect(portaledText(cell)).toContain(LONG),
+      { timeout: 3000, interval: 50 },
+    );
+    await userEvent.unhover(span!);
+  });
+
+  it("stays quiet when nothing is clipped — the tooltip would only repeat the cell", async () => {
+    const cell = renderInCell(<TruncatedText text={SHORT} />, "300px");
+
+    const span = cell.querySelector("span");
+    await userEvent.hover(span!);
+    // Base UI's default open delay is 600ms; wait past it and assert the
+    // portal never produced the tooltip.
+    await new Promise((resolve) => setTimeout(resolve, 1200));
+    expect(portaledText(cell)).not.toContain(SHORT);
+    await userEvent.unhover(span!);
+  });
+});

package/src/internal/__tests__/truncated-text.test.tsx

@@ -0,0 +1,33 @@
+// Fast structural pins for TruncatedText (the native-title sweep's
+// truncation replacement, stigmer-cloud#268). Happy-dom can honestly pin
+// the STRUCTURE — full text in the DOM, zero native titles, zero new tab
+// stops; the overflow-gated REVEAL needs real layout and lives in
+// truncated-text.layout.test.tsx.
+
+import { describe, it, expect, afterEach } from "vitest";
+import { render, cleanup, screen } from "@testing-library/react";
+import { TruncatedText } from "../truncated-text.js";
+
+afterEach(cleanup);
+
+describe("TruncatedText", () => {
+  it("renders the full text in the DOM with no native title and no tab stop", () => {
+    render(<TruncatedText text="models/anthropic/claude-4.6-opus" />);
+
+    // CSS truncation is purely visual: screen readers and selection get
+    // the full value from the DOM, so no sr-only duplicate is needed.
+    const span = screen.getByText("models/anthropic/claude-4.6-opus");
+    expect(span.closest("[title]")).toBeNull();
+    expect(span.closest("[tabindex]")).toBeNull();
+  });
+
+  it("applies stg:truncate by default and yields to a line-clamp class", () => {
+    const { rerender } = render(<TruncatedText text="abc" />);
+    expect(screen.getByText("abc").className).toContain("stg:truncate");
+
+    rerender(<TruncatedText text="abc" className="stg:line-clamp-2" />);
+    const clamped = screen.getByText("abc");
+    expect(clamped.className).toContain("stg:line-clamp-2");
+    expect(clamped.className).not.toContain("stg:truncate");
+  });
+});

package/src/internal/truncated-text.tsx

@@ -0,0 +1,81 @@
+"use client";
+
+import * as React from "react";
+import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "./tooltip.js";
+
+// ---------------------------------------------------------------------------
+// SDK-internal truncated-text span with an overflow-gated house tooltip.
+//
+// Replaces the `title={fullValue}` idiom on truncated cells (paths, hashes,
+// model ids, …) after the native-title sweep (stigmer/stigmer-cloud#268).
+// Native titles were OS-delayed and fired whether or not the text was
+// actually clipped; this helper opens the house tooltip ONLY when the text
+// truly overflows its box, checked at open time — a non-truncated cell
+// stays tooltip-free.
+//
+// The trigger is a plain, non-focusable span (the StatusHint precedent in
+// ConversationTimelineView): CSS truncation is purely visual, so the full
+// text is already in the DOM for screen readers and selection — the tooltip
+// is a sighted-pointer convenience, and a tab stop per table cell would be
+// noise. Works with or without a `TooltipProvider` in scope (the provider
+// only adds delay grouping); like ./tooltip.tsx, NOT exported from
+// @stigmer/react.
+// ---------------------------------------------------------------------------
+
+interface TruncatedTextProps {
+  /** The full value: rendered inside the span and shown by the tooltip. */
+  readonly text: string;
+  /**
+   * Classes for the truncating span. `stg:truncate` is applied by default;
+   * pass a `stg:line-clamp-*` class instead for multi-line clamping (the
+   * overflow check covers both axes).
+   */
+  readonly className?: string;
+  /** Tooltip placement; truncated cells read best with the default "top". */
+  readonly side?: React.ComponentProps<typeof TooltipContent>["side"];
+}
+
+/** True when CSS actually clipped the element on either axis. */
+function isOverflowing(el: HTMLElement): boolean {
+  return el.scrollWidth > el.clientWidth || el.scrollHeight > el.clientHeight;
+}
+
+export function TruncatedText({ text, className, side = "top" }: TruncatedTextProps) {
+  const spanRef = React.useRef<HTMLSpanElement>(null);
+  const [open, setOpen] = React.useState(false);
+
+  const handleOpenChange = React.useCallback((nextOpen: boolean) => {
+    if (nextOpen && spanRef.current && !isOverflowing(spanRef.current)) {
+      return; // Nothing is clipped — the tooltip would only repeat the cell.
+    }
+    setOpen(nextOpen);
+  }, []);
+
+  return (
+    <Tooltip open={open} onOpenChange={handleOpenChange}>
+      <TooltipTrigger
+        render={
+          <span
+            ref={spanRef}
+            className={cn(
+              // A plain inline span can neither truncate (overflow does not
+              // apply to inline boxes) nor be measured (clientWidth is 0 by
+              // spec), so the span defaults to block; cn()'s conflict
+              // resolution lets callers override with their own display
+              // class (inline-block, flex-1 cells, …).
+              "stg:block",
+              className?.match(/(?:^|\s)stg:line-clamp-/) ? undefined : "stg:truncate",
+              className,
+            )}
+          />
+        }
+      >
+        {text}
+      </TooltipTrigger>
+      <TooltipContent side={side} className="stg:break-all">
+        {text}
+      </TooltipContent>
+    </Tooltip>
+  );
+}

package/src/invitation/InvitationManager.tsx

@@ -15,6 +15,7 @@ import { useOrgInvitations } from "./useOrgInvitations.js";
 import { useCreateInvitation } from "./useCreateInvitation.js";
 import { useRevokeInvitation } from "./useRevokeInvitation.js";
 import { InvitationCreatedAlert } from "./InvitationCreatedAlert.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { RoleSelector } from "../iam-policy/RoleSelector.js";
 
 // ---------------------------------------------------------------------------
@@ -465,11 +466,23 @@ function InvitationRow({
 
         {/* Expiry */}
         {expiresAt && (
-          <span className="stg:text-xs stg:text-muted-foreground" title={timestampDate(expiresAt).toISOString()}>
-            {isActive
-              ? formatRelativeExpiry(timestampDate(expiresAt))
-              : formatShortDate(timestampDate(expiresAt))}
-          </span>
+          <Tooltip>
+            <TooltipTrigger
+              render={
+                <time
+                  dateTime={timestampDate(expiresAt).toISOString()}
+                  className="stg:text-xs stg:text-muted-foreground"
+                />
+              }
+            >
+              {isActive
+                ? formatRelativeExpiry(timestampDate(expiresAt))
+                : formatShortDate(timestampDate(expiresAt))}
+            </TooltipTrigger>
+            <TooltipContent side="top">
+              {timestampDate(expiresAt).toISOString()}
+            </TooltipContent>
+          </Tooltip>
         )}
       </div>
 

package/src/library/ScopeToggle.tsx

@@ -2,6 +2,7 @@
 
 import { useCallback, useRef } from "react";
 import { cn } from "@stigmer/theme";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import type { ResourceListScope } from "../search/index.js";
 
 /** Props for {@link ScopeToggle}. */
@@ -116,7 +117,7 @@ export function ScopeToggle({
         const isSelected = value === option.value;
         const Icon = option.icon;
 
-        return (
+        const radio = (
           <button
             key={option.value}
             ref={(el) => {
@@ -126,7 +127,6 @@ export function ScopeToggle({
             role="radio"
             aria-checked={isSelected}
             aria-label={option.ariaLabel}
-            title={compact ? option.ariaLabel : undefined}
             tabIndex={isSelected ? 0 : -1}
             disabled={disabled}
             onClick={() => handleSelect(option.value)}
@@ -143,6 +143,18 @@ export function ScopeToggle({
             {!compact && option.label}
           </button>
         );
+
+        // Icon-only radios need their name discoverable by sighted users
+        // too: in compact mode each radio is its own tooltip trigger (hover
+        // and roving-tabindex focus both open it). Full mode shows visible
+        // labels, so a tooltip would only repeat them.
+        if (!compact) return radio;
+        return (
+          <Tooltip key={option.value}>
+            <TooltipTrigger render={radio} />
+            <TooltipContent side="top">{option.ariaLabel}</TooltipContent>
+          </Tooltip>
+        );
       })}
     </div>
   );

package/src/library/VisibilitySelector.tsx

@@ -5,6 +5,7 @@ import { Popover } from "@base-ui/react/popover";
 import { cn } from "@stigmer/theme";
 import { ApiResourceVisibility } from "@stigmer/protos/ai/stigmer/commons/apiresource/enum_pb";
 import { useStigmerPortalContainer } from "../portal-container.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../internal/tooltip.js";
 import { ConfirmDialog } from "../resource-detail/ConfirmDialog.js";
 import { useConfirmAction } from "../resource-detail/useConfirmAction.js";
 import {
@@ -454,20 +455,26 @@ export function VisibilityBadge({
 
   if (onClick) {
     return (
-      <button
-        type="button"
-        onClick={onClick}
-        title="Manage access"
-        aria-label={`${option.label} visibility — manage access`}
-        className={cn(
-          VISIBILITY_CHIP_CLASS,
-          "stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground",
-          "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
-          className,
-        )}
-      >
-        {content}
-      </button>
+      <Tooltip>
+        <TooltipTrigger
+          render={
+            <button
+              type="button"
+              onClick={onClick}
+              aria-label={`${option.label} visibility — manage access`}
+              className={cn(
+                VISIBILITY_CHIP_CLASS,
+                "stg:transition-colors stg:hover:bg-accent-hover stg:hover:text-foreground",
+                "stg:focus-visible:outline-none stg:focus-visible:ring-2 stg:focus-visible:ring-ring",
+                className,
+              )}
+            />
+          }
+        >
+          {content}
+        </TooltipTrigger>
+        <TooltipContent side="top">Manage access</TooltipContent>
+      </Tooltip>
     );
   }