diff --git a/frontend/bun.lock b/frontend/bun.lock
index 6d303098..ce842f62 100644
--- a/frontend/bun.lock
+++ b/frontend/bun.lock
@@ -7,6 +7,7 @@
       "dependencies": {
         "@radix-ui/react-label": "^2.1.8",
         "@radix-ui/react-popover": "^1.1.15",
+        "@radix-ui/react-tooltip": "^1.2.8",
         "@sentry/react": "^10.30.0",
         "@t3-oss/env-core": "^0.13.8",
         "@tanstack/react-query": "^5.90.12",
@@ -296,6 +297,8 @@
 
     "@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.3", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-aeNmHnBxbi2St0au6VBVC7JXFlhLlOnvIIlePNniyUNAClzmtAUEY8/pBiK3iHjufOlwA+c20/8jngo7xcrg8A=="],
 
+    "@radix-ui/react-tooltip": ["@radix-ui/react-tooltip@1.2.8", "", { "dependencies": { "@radix-ui/primitive": "1.1.3", "@radix-ui/react-compose-refs": "1.1.2", "@radix-ui/react-context": "1.1.2", "@radix-ui/react-dismissable-layer": "1.1.11", "@radix-ui/react-id": "1.1.1", "@radix-ui/react-popper": "1.2.8", "@radix-ui/react-portal": "1.1.9", "@radix-ui/react-presence": "1.1.5", "@radix-ui/react-primitive": "2.1.3", "@radix-ui/react-slot": "1.2.3", "@radix-ui/react-use-controllable-state": "1.2.2", "@radix-ui/react-visually-hidden": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-tY7sVt1yL9ozIxvmbtN5qtmH2krXcBCfjEiCgKGLqunJHvgvZG2Pcl2oQ3kbcZARb1BGEHdkLzcYGO8ynVlieg=="],
+
     "@radix-ui/react-use-callback-ref": ["@radix-ui/react-use-callback-ref@1.1.1", "", { "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-FkBMwD+qbGQeMu1cOHnuGB6x4yzPjho8ap5WtbEJ26umhgqVXbhekKUQO+hZEL1vU92a3wHwdp0HAcqAUF5iDg=="],
 
     "@radix-ui/react-use-controllable-state": ["@radix-ui/react-use-controllable-state@1.2.2", "", { "dependencies": { "@radix-ui/react-use-effect-event": "0.0.2", "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-BjasUjixPFdS+NKkypcyyN5Pmg83Olst0+c6vGov0diwTEo6mgdqVR6hxcEgFuh4QrAs7Rc+9KuGJ9TVCj0Zzg=="],
@@ -310,6 +313,8 @@
 
     "@radix-ui/react-use-size": ["@radix-ui/react-use-size@1.1.1", "", { "dependencies": { "@radix-ui/react-use-layout-effect": "1.1.1" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-ewrXRDTAqAXlkl6t/fkXWNAhFX9I+CkKlw6zjEwk86RSPKwZr3xpBRso655aqYafwtnbpHLj6toFzmd6xdVptQ=="],
 
+    "@radix-ui/react-visually-hidden": ["@radix-ui/react-visually-hidden@1.2.3", "", { "dependencies": { "@radix-ui/react-primitive": "2.1.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-pzJq12tEaaIhqjbzpCuv/OypJY/BPavOofm+dbab+MHLajy277+1lLm6JFcGgF5eskJ6mquGirhXY2GD/8u8Ug=="],
+
     "@radix-ui/rect": ["@radix-ui/rect@1.1.1", "", {}, "sha512-HPwpGIzkl28mWyZqG52jiqDJ12waP11Pa1lGoiyUkIEuMLBP0oeK/C89esbXrxsky5we7dfd8U58nm0SgAWpVw=="],
 
     "@rolldown/pluginutils": ["@rolldown/pluginutils@1.0.0-beta.47", "", {}, "sha512-8QagwMH3kNCuzD8EWL8R2YPW5e4OrHNSAHRFDdmFqEwEaD/KcNKjVoumo+gP2vW5eKB2UPbM6vTYiGZX0ixLnw=="],
@@ -982,6 +987,10 @@
 
     "@radix-ui/react-primitive/@radix-ui/react-slot": ["@radix-ui/react-slot@1.2.4", "", { "dependencies": { "@radix-ui/react-compose-refs": "1.1.2" }, "peerDependencies": { "@types/react": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react"] }, "sha512-Jl+bCv8HxKnlTLVrcDE8zTMJ09R9/ukw4qBs/oZClOfoQk/cOTbDn+NceXfV7j09YPVQUryJPHurafcSg6EVKA=="],
 
+    "@radix-ui/react-tooltip/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
+    "@radix-ui/react-visually-hidden/@radix-ui/react-primitive": ["@radix-ui/react-primitive@2.1.3", "", { "dependencies": { "@radix-ui/react-slot": "1.2.3" }, "peerDependencies": { "@types/react": "*", "@types/react-dom": "*", "react": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc", "react-dom": "^16.8 || ^17.0 || ^18.0 || ^19.0 || ^19.0.0-rc" }, "optionalPeers": ["@types/react", "@types/react-dom"] }, "sha512-m9gTwRkhy2lvCPe6QJp4d3G1TYEUHn/FzJUtq9MjH46an1wJU+GdoGC5VLof8RX8Ft/DlpshApkhswDLZzHIcQ=="],
+
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/core": ["@emnapi/core@1.7.1", "", { "dependencies": { "@emnapi/wasi-threads": "1.1.0", "tslib": "^2.4.0" }, "bundled": true }, "sha512-o1uhUASyo921r2XtHYOHy7gdkGLge8ghBEQHMWmyJFoXlpU58kIrhhN3w26lpQb6dspetweapMn2CSNwQ8I4wg=="],
 
     "@tailwindcss/oxide-wasm32-wasi/@emnapi/runtime": ["@emnapi/runtime@1.7.1", "", { "dependencies": { "tslib": "^2.4.0" }, "bundled": true }, "sha512-PVtJr5CmLwYAU9PZDMITZoR5iAOShYREoR45EyyLrbntV50mdePTgUn4AmOw90Ifcj+x2kRjdzr1HP3RrNiHGA=="],
diff --git a/frontend/package.json b/frontend/package.json
index 85859854..b9c6514e 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -16,6 +16,7 @@
   "dependencies": {
     "@radix-ui/react-label": "^2.1.8",
     "@radix-ui/react-popover": "^1.1.15",
+    "@radix-ui/react-tooltip": "^1.2.8",
     "@sentry/react": "^10.30.0",
     "@t3-oss/env-core": "^0.13.8",
     "@tanstack/react-query": "^5.90.12",
diff --git a/frontend/src/components/Tooltip.tsx b/frontend/src/components/Tooltip.tsx
new file mode 100644
index 00000000..4fbe4ca3
--- /dev/null
+++ b/frontend/src/components/Tooltip.tsx
@@ -0,0 +1,46 @@
+import * as TooltipPrimitive from '@radix-ui/react-tooltip';
+import {cn} from 'utils/cn';
+
+const TooltipProvider = TooltipPrimitive.Provider;
+
+const Tooltip = TooltipPrimitive.Root;
+
+const TooltipTrigger = TooltipPrimitive.Trigger;
+
+interface TooltipContentProps extends React.ComponentPropsWithoutRef<
+  typeof TooltipPrimitive.Content
+> {
+  ref?: React.Ref<HTMLDivElement>;
+}
+
+function TooltipContent({
+  className,
+  align = 'center',
+  sideOffset = 4,
+  ref,
+  ...props
+}: TooltipContentProps) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        ref={ref}
+        align={align}
+        sideOffset={sideOffset}
+        className={cn(
+          'z-50',
+          'rounded-radius-md',
+          'border',
+          'border-gray-200',
+          'bg-background-primary',
+          'p-space-md',
+          'shadow-lg',
+          'outline-none',
+          className
+        )}
+        {...props}
+      />
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export {TooltipProvider, Tooltip, TooltipTrigger, TooltipContent};
diff --git a/frontend/src/routes/__root.tsx b/frontend/src/routes/__root.tsx
index 193596eb..36c33014 100644
--- a/frontend/src/routes/__root.tsx
+++ b/frontend/src/routes/__root.tsx
@@ -2,17 +2,20 @@ import type {QueryClient} from '@tanstack/react-query';
 import {createRootRouteWithContext, Outlet} from '@tanstack/react-router';
 import {TanStackRouterDevtools} from '@tanstack/react-router-devtools';
 import {ErrorState} from 'components/ErrorState';
+import {TooltipProvider} from 'components/Tooltip';
 
 import {Header} from './components/Header';
 
 const RootLayout = () => (
-  <div className="bg-background-tertiary text-content-primary leading-default min-h-screen">
-    <Header />
-    <main className="px-space-md py-space-xl md:px-space-xl mx-auto max-w-6xl">
-      <Outlet />
-    </main>
-    <TanStackRouterDevtools />
-  </div>
+  <TooltipProvider delayDuration={200}>
+    <div className="bg-background-tertiary text-content-primary leading-default min-h-screen">
+      <Header />
+      <main className="px-space-md py-space-xl md:px-space-xl mx-auto max-w-6xl">
+        <Outlet />
+      </main>
+      <TanStackRouterDevtools />
+    </div>
+  </TooltipProvider>
 );
 
 export const Route = createRootRouteWithContext<{queryClient: QueryClient}>()({
diff --git a/frontend/src/routes/availability/components/AvailabilityTooltip.tsx b/frontend/src/routes/availability/components/AvailabilityTooltip.tsx
new file mode 100644
index 00000000..0b394d6e
--- /dev/null
+++ b/frontend/src/routes/availability/components/AvailabilityTooltip.tsx
@@ -0,0 +1,52 @@
+import {Tooltip, TooltipContent, TooltipTrigger} from 'components/Tooltip';
+import {Info} from 'lucide-react';
+
+export function AvailabilityTooltip() {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild>
+        <button
+          className="text-content-secondary hover:text-content-primary transition-colors"
+          aria-label="How availability is calculated"
+        >
+          <Info size={18} />
+        </button>
+      </TooltipTrigger>
+      <TooltipContent align="start" className="text-size-sm max-w-sm">
+        <h3 className="text-content-headings mb-space-sm font-semibold">
+          How availability is calculated
+        </h3>
+        <p className="text-content-secondary mb-space-sm">
+          Availability percentage is calculated as:
+        </p>
+        <p className="text-content-primary bg-background-secondary mb-space-sm px-space-sm py-space-xs text-size-xs rounded font-mono">
+          (Total Time &minus; Downtime) / Total Time &times; 100
+        </p>
+        <p className="text-content-secondary mb-space-sm">
+          Only <strong>T0 service tier</strong> incidents with{' '}
+          <strong>availability impact</strong> are included.
+        </p>
+        <p className="text-content-secondary mb-space-md">
+          Downtime is captured in the time period the incident was created.
+        </p>
+        <h4 className="text-content-headings mb-space-xs font-medium">
+          Color thresholds
+        </h4>
+        <ul className="text-content-secondary space-y-space-xs">
+          <li className="gap-space-xs flex items-center">
+            <span className="bg-graphics-success-moderate inline-block size-3 rounded" />
+            <span>Green: &ge; 99.9%</span>
+          </li>
+          <li className="gap-space-xs flex items-center">
+            <span className="bg-graphics-warning-moderate inline-block size-3 rounded" />
+            <span>Yellow: &ge; 99.85%</span>
+          </li>
+          <li className="gap-space-xs flex items-center">
+            <span className="bg-graphics-danger-moderate inline-block size-3 rounded" />
+            <span>Red: &lt; 99.85%</span>
+          </li>
+        </ul>
+      </TooltipContent>
+    </Tooltip>
+  );
+}
diff --git a/frontend/src/routes/availability/index.tsx b/frontend/src/routes/availability/index.tsx
index 0545ac62..5b8c6398 100644
--- a/frontend/src/routes/availability/index.tsx
+++ b/frontend/src/routes/availability/index.tsx
@@ -6,6 +6,7 @@ import {ErrorState} from 'components/ErrorState';
 import {GetHelpLink} from 'components/GetHelpLink';
 import {z} from 'zod';
 
+import {AvailabilityTooltip} from './components/AvailabilityTooltip';
 import {PeriodLabels} from './components/PeriodLabels';
 import {PeriodTabs} from './components/PeriodTabs';
 import {RegionRow} from './components/RegionRow';
@@ -73,16 +74,19 @@ function AvailabilityPage() {
     <div className="flex flex-col">
       <div className="mb-space-xl flex flex-wrap items-end justify-between gap-4">
         <div>
-          <h1 className="text-content-headings text-size-2xl font-semibold">
-            Availability by Region
-          </h1>
+          <div className="gap-space-sm flex items-center">
+            <h1 className="text-content-headings text-size-2xl font-semibold">
+              Availability by Region
+            </h1>
+            <AvailabilityTooltip />
+          </div>
           <p className="text-content-secondary mt-space-xs text-size-sm">
             {getDateRangeLabel(periods)}
           </p>
         </div>
         <PeriodTabs activePeriod={activePeriod} />
       </div>
-      <Card className="flex flex-col gap-space-md px-space-xl pt-space-sm pb-space-lg">
+      <Card className="gap-space-md px-space-xl pt-space-sm pb-space-lg flex flex-col">
         <PeriodLabels periods={periods} />
         {regionNames.map(name => (
           <RegionRow key={name} regionName={name} periods={periods} />