diff --git a/README.md b/README.md
index 652fdfe..6e87a63 100644
--- a/README.md
+++ b/README.md
@@ -289,37 +289,37 @@ Everything imports from `@corbits/react-ui`, except rows marked "optional peer",
 
 #### Controls
 
-| Component           | What it is                                                      |
-| ------------------- | --------------------------------------------------------------- |
-| `Button`            | Button with variants and sizes                                  |
-| `Input`             | Text input                                                      |
-| `Textarea`          | Multi-line input                                                |
-| `Select`            | Native select                                                   |
-| `Checkbox`          | Checkbox                                                        |
-| `SelectionCheckbox` | Row-selection checkbox                                          |
-| `Switch`            | On/off toggle                                                   |
-| `FileInput`         | File picker                                                     |
-| `Tabs`              | Tab strip                                                       |
-| `ViewToggle`        | Grid or rows segmented control                                  |
-| `FilterBar`         | Row of filters with an active-filter summary                    |
-| `FilterChip`        | One toggleable filter                                           |
-| `KindCardGrid`      | Selectable card grid                                            |
-| `ActionBar`         | Grouped view controls, inline or floating                       |
-| `BulkActionBar`     | Actions for a multi-row selection                               |
-| `Table`             | Table primitives                                                |
-| `SortableTable`     | Table with sortable columns                                     |
-| `Badge`             | Status label                                                    |
-| `StatusDot`         | Colored status dot                                              |
-| `Avatar`            | Initials or image avatar                                        |
-| `ProviderMark`      | Which service an action goes through                            |
-| `Skeleton`          | Loading placeholder                                             |
-| `Dialog`            | Modal dialog (optional peer, `ui/dialog`)                       |
-| `CommandPalette`    | Global search overlay (optional peer, `ui/command-palette`)     |
-| `Menu`              | Dropdown menu (optional peer, `ui/menu`)                        |
-| `InfoTooltip`       | Hover info tooltip (optional peer, `ui/tooltip`)                |
-| `Toaster`           | Toast host; call `toast()` anywhere (optional peer, `ui/toast`) |
-| `ThemeProvider`     | Persists light, dark or system mode and presets                 |
-| `ThemeToggle`       | Light, dark or system switch                                    |
+| Component                | What it is                                                                             |
+| ------------------------ | -------------------------------------------------------------------------------------- |
+| `Button`                 | Button with variants and sizes                                                         |
+| `Input`                  | Text input                                                                             |
+| `Textarea`               | Multi-line input                                                                       |
+| `Select`                 | Native select                                                                          |
+| `Checkbox`               | Checkbox                                                                               |
+| `SelectionCheckbox`      | Row-selection checkbox                                                                 |
+| `Switch`                 | On/off toggle                                                                          |
+| `FileInput`              | File picker                                                                            |
+| `Tabs`                   | Tab strip                                                                              |
+| `ViewToggle`             | Grid or rows segmented control                                                         |
+| `FilterBar`              | Row of filters with an active-filter summary                                           |
+| `FilterChip`             | One toggleable filter                                                                  |
+| `KindCardGrid`           | Selectable card grid                                                                   |
+| `ActionBar`              | Grouped view controls, inline or floating                                              |
+| `BulkActionBar`          | Actions for a multi-row selection                                                      |
+| `Table`                  | Table primitives                                                                       |
+| `SortableTable`          | Table with sortable columns                                                            |
+| `Badge`                  | Status label                                                                           |
+| `StatusDot`              | Colored status dot                                                                     |
+| `Avatar`                 | Initials or image avatar                                                               |
+| `ProviderMark`           | Which service an action goes through                                                   |
+| `Skeleton`               | Loading placeholder                                                                    |
+| `Dialog`                 | Modal dialog (optional peer, `ui/dialog`)                                              |
+| `CommandPalette`         | Global search overlay (optional peer, `ui/command-palette`)                            |
+| `Menu`                   | Dropdown menu (optional peer, `ui/menu`)                                               |
+| `Tooltip`, `InfoTooltip` | General tooltip around any trigger, and hover info glyph (optional peer, `ui/tooltip`) |
+| `Toaster`                | Toast host; call `toast()` anywhere (optional peer, `ui/toast`)                        |
+| `ThemeProvider`          | Persists light, dark or system mode and presets                                        |
+| `ThemeToggle`            | Light, dark or system switch                                                           |
 
 ## For coding agents
 
diff --git a/src/ui/tooltip.test.tsx b/src/ui/tooltip.test.tsx
index 9e87a1c..9782a59 100644
--- a/src/ui/tooltip.test.tsx
+++ b/src/ui/tooltip.test.tsx
@@ -2,9 +2,34 @@ import { describe, expect, test } from "bun:test";
 import { act, createElement } from "react";
 import { createRoot } from "react-dom/client";
 
-import { InfoTooltip } from "./tooltip.js";
+import { InfoTooltip, Tooltip, type TooltipProps } from "./tooltip.js";
 
-function mount(label: string) {
+function requireButton(
+  root: ParentNode,
+  selector = "button",
+): HTMLButtonElement {
+  const element = root.querySelector(selector);
+  if (!(element instanceof HTMLButtonElement)) {
+    throw new Error(`Expected HTMLButtonElement for selector "${selector}"`);
+  }
+  return element;
+}
+
+function requireDescribedByContent(button: HTMLButtonElement): HTMLElement {
+  const id = button.getAttribute("aria-describedby");
+  expect(id).not.toBeNull();
+  if (id === null) {
+    throw new Error("Expected aria-describedby attribute");
+  }
+  const content = document.getElementById(id);
+  expect(content).not.toBeNull();
+  if (content === null) {
+    throw new Error(`Expected element with id "${id}"`);
+  }
+  return content;
+}
+
+function mountInfo(label: string) {
   const container = document.createElement("div");
   document.body.appendChild(container);
   const root = createRoot(container);
@@ -12,25 +37,52 @@ function mount(label: string) {
     root.render(createElement(InfoTooltip, { label }));
   });
   return {
-    trigger: () => document.body.querySelector("button") as HTMLButtonElement,
-    unmount: () => root.unmount(),
+    trigger: () => requireButton(container),
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
+  };
+}
+
+function mountTooltip(props: TooltipProps) {
+  const container = document.createElement("div");
+  document.body.appendChild(container);
+  const root = createRoot(container);
+  act(() => {
+    root.render(createElement(Tooltip, props));
+  });
+  return {
+    container,
+    rerender: (next: TooltipProps) => {
+      act(() => {
+        root.render(createElement(Tooltip, next));
+      });
+    },
+    unmount: () => {
+      act(() => {
+        root.unmount();
+      });
+      container.remove();
+    },
   };
 }
 
 describe("InfoTooltip", () => {
   test("the trigger is a focusable button", () => {
-    const { trigger, unmount } = mount(
+    const { trigger, unmount } = mountInfo(
       "Positioned by event order, not real timing.",
     );
     const button = trigger();
-    expect(button).not.toBeNull();
     expect(button.tagName).toBe("BUTTON");
     expect(button.getAttribute("type")).toBe("button");
     unmount();
   });
 
   test("focusing the trigger associates and reveals the tooltip content", async () => {
-    const { trigger, unmount } = mount(
+    const { trigger, unmount } = mountInfo(
       "Positioned by event order, not real timing.",
     );
     const button = trigger();
@@ -43,18 +95,15 @@ describe("InfoTooltip", () => {
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
 
-    const describedBy = button.getAttribute("aria-describedby");
-    expect(describedBy).not.toBeNull();
-    const content = document.getElementById(describedBy as string);
-    expect(content).not.toBeNull();
-    expect(content?.textContent).toContain(
+    const content = requireDescribedByContent(button);
+    expect(content.textContent).toContain(
       "Positioned by event order, not real timing.",
     );
     unmount();
   });
 
   test("Escape dismisses the tooltip", async () => {
-    const { trigger, unmount } = mount(
+    const { trigger, unmount } = mountInfo(
       "Positioned by event order, not real timing.",
     );
     const button = trigger();
@@ -65,10 +114,8 @@ describe("InfoTooltip", () => {
     await act(async () => {
       await new Promise((resolve) => setTimeout(resolve, 0));
     });
-    const describedByWhileOpen = button.getAttribute("aria-describedby");
-    expect(describedByWhileOpen).not.toBeNull();
-    const contentIdWhileOpen = describedByWhileOpen as string;
-    expect(document.getElementById(contentIdWhileOpen)).not.toBeNull();
+    const contentWhileOpen = requireDescribedByContent(button);
+    const contentIdWhileOpen = contentWhileOpen.id;
 
     act(() => {
       button.dispatchEvent(
@@ -88,3 +135,156 @@ describe("InfoTooltip", () => {
     unmount();
   });
 });
+
+describe("Tooltip", () => {
+  test("wraps a focusable element as the trigger and preserves element attributes", () => {
+    const { container, unmount } = mountTooltip({
+      label: "Custom note",
+      children: (
+        <button type="button" id="my-action" className="custom-trigger">
+          Trigger
+        </button>
+      ),
+    });
+    const button = requireButton(container, "#my-action");
+    expect(button.tagName).toBe("BUTTON");
+    expect(button.classList.contains("custom-trigger")).toBe(true);
+    unmount();
+  });
+
+  test("focusing the trigger reveals the tooltip and associates via aria-describedby", async () => {
+    const { container, unmount } = mountTooltip({
+      label: "Helpful contextual detail",
+      children: <button type="button">Inspect</button>,
+    });
+    const button = requireButton(container);
+
+    act(() => {
+      button.focus();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const content = requireDescribedByContent(button);
+    expect(content.textContent).toContain("Helpful contextual detail");
+    unmount();
+  });
+
+  test("renders rich ReactNode content in the tooltip bubble", async () => {
+    const { container, unmount } = mountTooltip({
+      label: (
+        <span data-testid="rich-label">
+          Formatted <strong>bold</strong> note
+        </span>
+      ),
+      children: <button type="button">Details</button>,
+    });
+    const button = requireButton(container);
+
+    act(() => {
+      button.focus();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const content = requireDescribedByContent(button);
+    expect(content.querySelector("[data-testid='rich-label']")).not.toBeNull();
+    expect(content.querySelector("strong")?.textContent).toBe("bold");
+    unmount();
+  });
+
+  test("Escape dismisses the open tooltip", async () => {
+    const { container, unmount } = mountTooltip({
+      label: "Dismiss me with escape",
+      children: <button type="button">Target</button>,
+    });
+    const button = requireButton(container);
+
+    act(() => {
+      button.focus();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+    const contentWhileOpen = requireDescribedByContent(button);
+    const describedBy = contentWhileOpen.id;
+
+    act(() => {
+      button.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Escape",
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    expect(button.getAttribute("aria-describedby")).toBeNull();
+    expect(document.getElementById(describedBy)).toBeNull();
+    unmount();
+  });
+
+  test("accepts custom side and className on the tooltip content", async () => {
+    const { container, unmount } = mountTooltip({
+      label: "Side note",
+      side: "right",
+      className: "custom-tooltip-class",
+      children: <button type="button">Side trigger</button>,
+    });
+    const button = requireButton(container);
+
+    act(() => {
+      button.focus();
+    });
+    await act(async () => {
+      await new Promise((resolve) => setTimeout(resolve, 0));
+    });
+
+    const content = requireDescribedByContent(button);
+    expect(content.getAttribute("data-side")).toBe("right");
+    expect(content.classList.contains("custom-tooltip-class")).toBe(true);
+    unmount();
+  });
+
+  test("supports controlled open state and onOpenChange", async () => {
+    const events: boolean[] = [];
+    const { container, rerender, unmount } = mountTooltip({
+      label: "Controlled note",
+      open: true,
+      onOpenChange: (next) => {
+        events.push(next);
+      },
+      children: <button type="button">Controlled trigger</button>,
+    });
+    const button = requireButton(container);
+    const content = requireDescribedByContent(button);
+    expect(content.textContent).toContain("Controlled note");
+
+    act(() => {
+      button.dispatchEvent(
+        new KeyboardEvent("keydown", {
+          key: "Escape",
+          bubbles: true,
+          cancelable: true,
+        }),
+      );
+    });
+    expect(events).toEqual([false]);
+
+    rerender({
+      label: "Controlled note",
+      open: false,
+      onOpenChange: (next) => {
+        events.push(next);
+      },
+      children: <button type="button">Controlled trigger</button>,
+    });
+    expect(button.getAttribute("aria-describedby")).toBeNull();
+    unmount();
+  });
+});
diff --git a/src/ui/tooltip.tsx b/src/ui/tooltip.tsx
index ca95cb5..0a8fd6a 100644
--- a/src/ui/tooltip.tsx
+++ b/src/ui/tooltip.tsx
@@ -2,17 +2,94 @@
 
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
 import { InfoIcon } from "lucide-react";
+import * as React from "react";
 
 import { cn } from "../lib/utils.js";
 
+export type TooltipSide = "top" | "right" | "bottom" | "left";
+
+export type TooltipProps = {
+  /** The content shown in the tooltip bubble and bound to the trigger via `aria-describedby`. */
+  readonly label: React.ReactNode;
+  /** Focusable trigger element that discloses the tooltip on hover or keyboard focus. */
+  readonly children: React.ReactElement;
+  /** Preferred side of the trigger to render against. Defaults to "top". */
+  readonly side?: TooltipSide | undefined;
+  /** Offset distance in pixels from the trigger. Defaults to 6. */
+  readonly sideOffset?: number | undefined;
+  /** Delay in milliseconds before opening on hover. Defaults to 200. */
+  readonly delay?: number | undefined;
+  /** Render already open — uncontrolled, for stories and screenshots. */
+  readonly defaultOpen?: boolean | undefined;
+  /** Controlled open state. */
+  readonly open?: boolean | undefined;
+  /** Callback fired when the open state changes. */
+  readonly onOpenChange?: ((open: boolean) => void) | undefined;
+  /** Additional class names applied to the tooltip content bubble. */
+  readonly className?: string | undefined;
+};
+
+/**
+ * A general tooltip that wraps a focusable trigger element and discloses a note on hover or focus.
+ *
+ * Pass a keyboard-focusable element (such as `<Button>` or `<button>`) as `children` so the
+ * note is reachable by keyboard and touch. For a standalone info glyph beside passive text,
+ * use {@link InfoTooltip}. Radix owns the `aria-describedby` wiring, the open-on-focus/hover
+ * behaviour, and Escape-to-dismiss.
+ */
+export function Tooltip({
+  label,
+  children,
+  side = "top",
+  sideOffset = 6,
+  delay = 200,
+  defaultOpen,
+  open,
+  onOpenChange,
+  className,
+}: TooltipProps) {
+  const rootProps: TooltipPrimitive.TooltipProps = {
+    defaultOpen: defaultOpen ?? false,
+  };
+  if (open !== undefined) {
+    rootProps.open = open;
+  }
+  if (onOpenChange !== undefined) {
+    rootProps.onOpenChange = onOpenChange;
+  }
+
+  return (
+    <TooltipPrimitive.Provider delayDuration={delay}>
+      <TooltipPrimitive.Root {...rootProps}>
+        <TooltipPrimitive.Trigger asChild>{children}</TooltipPrimitive.Trigger>
+        <TooltipPrimitive.Portal>
+          <TooltipPrimitive.Content
+            data-slot="tooltip-content"
+            side={side}
+            sideOffset={sideOffset}
+            className={cn(
+              "z-50 max-w-64 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg",
+              "data-[state=delayed-open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]",
+              className,
+            )}
+          >
+            {label}
+            <TooltipPrimitive.Arrow className="fill-popover" />
+          </TooltipPrimitive.Content>
+        </TooltipPrimitive.Portal>
+      </TooltipPrimitive.Root>
+    </TooltipPrimitive.Provider>
+  );
+}
+
 export type InfoTooltipProps = {
   /** The note shown in the tooltip and bound to the trigger via `aria-describedby`. */
   readonly label: string;
   /** Accessible name for the trigger button. Defaults to `label`. */
-  readonly triggerLabel?: string;
+  readonly triggerLabel?: string | undefined;
   /** Render already open — uncontrolled, for stories and screenshots. */
-  readonly defaultOpen?: boolean;
-  readonly className?: string;
+  readonly defaultOpen?: boolean | undefined;
+  readonly className?: string | undefined;
 };
 
 /**
@@ -33,36 +110,19 @@ export function InfoTooltip({
   className,
 }: InfoTooltipProps) {
   return (
-    <TooltipPrimitive.Provider delayDuration={200}>
-      <TooltipPrimitive.Root defaultOpen={defaultOpen ?? false}>
-        <TooltipPrimitive.Trigger asChild>
-          <button
-            type="button"
-            aria-label={triggerLabel ?? label}
-            className={cn(
-              "inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors",
-              "hover:text-foreground focus-visible:text-foreground focus-visible:outline-none",
-              "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]",
-              className,
-            )}
-          >
-            <InfoIcon className="size-full" />
-          </button>
-        </TooltipPrimitive.Trigger>
-        <TooltipPrimitive.Portal>
-          <TooltipPrimitive.Content
-            data-slot="tooltip-content"
-            sideOffset={6}
-            className={cn(
-              "z-50 max-w-64 rounded-md border border-border bg-popover px-2.5 py-1.5 text-xs text-popover-foreground shadow-lg",
-              "data-[state=delayed-open]:animate-[corbits-fade-in_150ms_ease-out] data-[state=closed]:animate-[corbits-fade-out_120ms_ease-in]",
-            )}
-          >
-            {label}
-            <TooltipPrimitive.Arrow className="fill-popover" />
-          </TooltipPrimitive.Content>
-        </TooltipPrimitive.Portal>
-      </TooltipPrimitive.Root>
-    </TooltipPrimitive.Provider>
+    <Tooltip label={label} defaultOpen={defaultOpen ?? false}>
+      <button
+        type="button"
+        aria-label={triggerLabel ?? label}
+        className={cn(
+          "inline-flex size-4 shrink-0 items-center justify-center rounded-full text-muted-foreground transition-colors",
+          "hover:text-foreground focus-visible:text-foreground focus-visible:outline-none",
+          "focus-visible:shadow-[0_0_0_3px_color-mix(in_srgb,var(--primary)_22%,transparent)]",
+          className,
+        )}
+      >
+        <InfoIcon className="size-full" />
+      </button>
+    </Tooltip>
   );
 }
diff --git a/stories/primitives/tooltip.stories.tsx b/stories/primitives/tooltip.stories.tsx
index c562228..8202acf 100644
--- a/stories/primitives/tooltip.stories.tsx
+++ b/stories/primitives/tooltip.stories.tsx
@@ -1,4 +1,5 @@
-import { InfoTooltip } from "../../src/ui/tooltip.js";
+import { Button } from "../../src/ui/button.js";
+import { InfoTooltip, Tooltip } from "../../src/ui/tooltip.js";
 
 export default { title: "Primitives / Tooltip" };
 
@@ -13,7 +14,7 @@ export const Basic = () => (
 // contrast against `--popover` are visible without hovering — check this in
 // both themes.
 export const Open = () => (
-  <div className="flex items-center gap-2 pt-8 pl-8 text-sm">
+  <div className="flex items-center gap-2 pt-20 pl-24 text-sm">
     <span>Token budget</span>
     <InfoTooltip
       label="Caps spend per run; excess requests queue until the next window."
@@ -21,3 +22,68 @@ export const Open = () => (
     />
   </div>
 );
+
+export const General = () => (
+  <div className="flex flex-wrap items-center gap-4 p-8 text-sm">
+    <Tooltip label="Save changes to current workspace">
+      <Button size="sm">Save</Button>
+    </Tooltip>
+
+    <Tooltip label="Inspect active workspace endpoints">
+      <Button variant="outline" size="sm">
+        API Live
+      </Button>
+    </Tooltip>
+
+    <Tooltip label="View keyboard shortcuts">
+      <Button variant="ghost" size="sm">
+        Shortcuts
+      </Button>
+    </Tooltip>
+  </div>
+);
+
+export const PlacementSides = () => (
+  <div className="grid max-w-lg grid-cols-2 gap-x-24 gap-y-16 px-36 py-16 text-sm">
+    <Tooltip side="top" label="Disclosed on top" defaultOpen>
+      <Button variant="outline" size="sm">
+        Top
+      </Button>
+    </Tooltip>
+    <Tooltip side="bottom" label="Disclosed on bottom" defaultOpen>
+      <Button variant="outline" size="sm">
+        Bottom
+      </Button>
+    </Tooltip>
+    <Tooltip side="left" label="Disclosed on left" defaultOpen>
+      <Button variant="outline" size="sm">
+        Left
+      </Button>
+    </Tooltip>
+    <Tooltip side="right" label="Disclosed on right" defaultOpen>
+      <Button variant="outline" size="sm">
+        Right
+      </Button>
+    </Tooltip>
+  </div>
+);
+
+export const RichLabel = () => (
+  <div className="pt-20 pl-24 text-sm">
+    <Tooltip
+      defaultOpen
+      label={
+        <div className="flex flex-col gap-1">
+          <span className="font-semibold text-foreground">API Quota</span>
+          <span className="text-muted-foreground">
+            8,420 of 10,000 monthly credits used.
+          </span>
+        </div>
+      }
+    >
+      <Button variant="outline" size="sm">
+        Usage meter
+      </Button>
+    </Tooltip>
+  </div>
+);