diff --git a/webui/src/app/_layout.tsx b/webui/src/app/_layout.tsx
index d01d338..ae957ad 100644
--- a/webui/src/app/_layout.tsx
+++ b/webui/src/app/_layout.tsx
@@ -5,6 +5,7 @@ import { HmrProvider } from '~/providers/hmr';
 import { QueryProvider } from '~/providers/query';
 import { ThemeProvider } from '~/providers/theme';
 import { ToastProvider } from '~/ui/Toast';
+import { TooltipProvider } from '~/ui/Tooltip';
 
 // Import the Expo-required radix styles
 import '@radix-ui/colors/green.css';
@@ -34,12 +35,14 @@ export default function RootLayout() {
   return (
     <QueryProvider>
       <ThemeProvider>
-        <BundleProvider>
-          <ToastProvider />
-          <HmrProvider>
-            <Slot />
-          </HmrProvider>
-        </BundleProvider>
+        <TooltipProvider delayDuration={200}>
+          <BundleProvider>
+            <ToastProvider />
+            <HmrProvider>
+              <Slot />
+            </HmrProvider>
+          </BundleProvider>
+        </TooltipProvider>
       </ThemeProvider>
     </QueryProvider>
   );
diff --git a/webui/src/components/BundleTag.tsx b/webui/src/components/BundleTag.tsx
index 04c0797..f902d3e 100644
--- a/webui/src/components/BundleTag.tsx
+++ b/webui/src/components/BundleTag.tsx
@@ -5,6 +5,7 @@ import { EnvironmentIcon } from '~/components/EnvironmentIcon';
 import { EnvironmentName } from '~/components/EnvironmentName';
 import { PlatformName } from '~/components/PlatformName';
 import { Tag } from '~/ui/Tag';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
 import type { AtlasBundle } from '~core/data/types';
 
 const bundleTagVariants = cva('', {
@@ -34,17 +35,54 @@ type BundelTagProps = Omit<
 
 export function BundleTag({ className, platform, environment, ...props }: BundelTagProps) {
   return (
-    <Tag
-      className={bundleTagVariants({ platform, environment, className })}
-      variant="none"
-      {...props}
-    >
-      <PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
-        <PlatformName platform={platform!} />
-        <span>×</span>
-        <EnvironmentName environment={environment!} />
-        <EnvironmentIcon environment={environment!} size={14} />
-      </PlatformName>
-    </Tag>
+    <Tooltip>
+      <TooltipTrigger>
+        <Tag
+          className={bundleTagVariants({ platform, environment, className })}
+          variant="none"
+          {...props}
+        >
+          <PlatformName platform={platform!} className="inline-flex items-center gap-1.5">
+            <PlatformName platform={platform!} />
+            <span>×</span>
+            <EnvironmentName environment={environment!} />
+            <EnvironmentIcon environment={environment!} size={14} />
+          </PlatformName>
+        </Tag>
+      </TooltipTrigger>
+      <TooltipContent>
+        <p>
+          Expo creates bundles for every platform containing only{' '}
+          <a
+            className="text-link hover:underline"
+            href="https://reactnative.dev/docs/platform-specific-code"
+            target="_blank"
+          >
+            platform-specific code
+          </a>
+          , like Android, iOS, and Web. Some platforms can also run in multiple environments.
+        </p>
+        <p className="my-2">
+          Atlas marks every bundle with both the platform and target environment for which the
+          bundle is built.
+        </p>
+        <p className="mt-2">
+          <ul className="list-disc">
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="client" size={14} /> Client — Bundles that run on
+              device.
+            </li>
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="node" size={14} /> SSR — Bundles that only run on
+              server.
+            </li>
+            <li className="inline-flex items-center gap-1">
+              <EnvironmentIcon environment="react-server" size={14} /> RSC — React server component
+              bundles.
+            </li>
+          </ul>
+        </p>
+      </TooltipContent>
+    </Tooltip>
   );
 }
diff --git a/webui/src/components/FileSize.tsx b/webui/src/components/FileSize.tsx
index a4a8e90..01ddd1c 100644
--- a/webui/src/components/FileSize.tsx
+++ b/webui/src/components/FileSize.tsx
@@ -1,7 +1,7 @@
 // @ts-expect-error
 import AsteriskIcon from 'lucide-react/dist/esm/icons/asterisk';
 
-import { Tooltip, TooltipContent, TooltipProvider, TooltipTrigger } from '~/ui/Tooltip';
+import { Tooltip, TooltipContent, TooltipTrigger } from '~/ui/Tooltip';
 
 type BundleFileSizeProps = {
   /** The size of the files or bundle, in bytes */
@@ -12,32 +12,30 @@ export function FileSize(props: BundleFileSizeProps) {
   return (
     <div className="inline-flex flex-row items-start">
       {formatByteSize(props.byteSize)}
-      <TooltipProvider delayDuration={0}>
-        <Tooltip>
-          <TooltipTrigger className="group">
-            <AsteriskIcon
-              className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
-              size={12}
-            />
-          </TooltipTrigger>
-          <TooltipContent className="border-info text-quaternary shadow-md">
-            <p className="mb-2">
-              All file sizes are calculated based on the transpiled JavaScript byte size.
-            </p>
-            <p className="">
-              While these sizes might differ from actual bundle size when using{' '}
-              <a
-                className="text-link hover:underline"
-                href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
-                target="_blank"
-              >
-                Hermes Bytecode (HBC)
-              </a>
-              , the relative proportions are still correct.
-            </p>
-          </TooltipContent>
-        </Tooltip>
-      </TooltipProvider>
+      <Tooltip>
+        <TooltipTrigger className="group">
+          <AsteriskIcon
+            className="hover:color-info group-data-[state=delayed-open]:color-info group-data-[state=instant-open]:color-info"
+            size={12}
+          />
+        </TooltipTrigger>
+        <TooltipContent className="border-info text-quaternary shadow-md">
+          <p className="mb-2">
+            All file sizes are calculated based on the transpiled JavaScript byte size.
+          </p>
+          <p>
+            While these sizes might differ from actual bundle size when using{' '}
+            <a
+              className="text-link hover:underline"
+              href="https://github.com/facebook/hermes/blob/main/doc/Design.md"
+              target="_blank"
+            >
+              Hermes Bytecode (HBC)
+            </a>
+            , the relative proportions are still correct.
+          </p>
+        </TooltipContent>
+      </Tooltip>
     </div>
   );
 }