coder · jaaydenh · Nov 24, 2025 · Oct 12, 2025 · Oct 13, 2025 · Nov 21, 2025
diff --git a/site/.storybook/preview.tsx b/site/.storybook/preview.tsx
@@ -11,6 +11,7 @@ import isChromatic from "chromatic/isChromatic";
 import { StrictMode } from "react";
 import { QueryClient, QueryClientProvider } from "react-query";
 import { withRouter } from "storybook-addon-remix-react-router";
+import { TooltipProvider } from "../src/components/Tooltip/Tooltip";
 import "theme/globalFonts";
 import type { Decorator, Loader, Parameters } from "@storybook/react-vite";
 import themes from "../src/theme";
@@ -100,8 +101,10 @@ const withTheme: Decorator = (Story, context) => {
 			<StyledEngineProvider injectFirst>
 				<MuiThemeProvider theme={themes[selected]}>
 					<EmotionThemeProvider theme={themes[selected]}>
-						<CssBaseline />
-						<Story />
+						<TooltipProvider delayDuration={100}>
+							<CssBaseline />
+							<Story />
+						</TooltipProvider>
 					</EmotionThemeProvider>
 				</MuiThemeProvider>
 			</StyledEngineProvider>

diff --git a/site/src/App.tsx b/site/src/App.tsx
@@ -1,5 +1,6 @@
 import "./theme/globalFonts";
 import { ReactQueryDevtools } from "@tanstack/react-query-devtools";
+import { TooltipProvider } from "components/Tooltip/Tooltip";
 import {
 	type FC,
 	type ReactNode,
@@ -53,8 +54,10 @@ export const AppProviders: FC<AppProvidersProps> = ({
 		<QueryClientProvider client={queryClient}>
 			<AuthProvider>
 				<ThemeProvider>
-					{children}
-					<GlobalSnackbar />
+					<TooltipProvider delayDuration={100}>
+						{children}
+						<GlobalSnackbar />
+					</TooltipProvider>
 				</ThemeProvider>
 			</AuthProvider>
 			{showDevtools && <ReactQueryDevtools initialIsOpen={showDevtools} />}

diff --git a/site/src/components/CodeExample/CodeExample.tsx b/site/src/components/CodeExample/CodeExample.tsx
@@ -3,7 +3,6 @@ import { Button } from "components/Button/Button";
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
@@ -77,21 +76,19 @@ export const CodeExample: FC<CodeExampleProps> = ({
 
 			<div className="flex items-center gap-1">
 				{showRevealButton && redactPattern && !secret && (
-					<TooltipProvider>
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<Button
-									size="icon"
-									variant="subtle"
-									onClick={() => setShowFullValue(!showFullValue)}
-								>
-									{icon}
-									<span className="sr-only">{showButtonLabel}</span>
-								</Button>
-							</TooltipTrigger>
-							<TooltipContent>{showButtonLabel}</TooltipContent>
-						</Tooltip>
-					</TooltipProvider>
+					<Tooltip>
+						<TooltipTrigger asChild>
+							<Button
+								size="icon"
+								variant="subtle"
+								onClick={() => setShowFullValue(!showFullValue)}
+							>
+								{icon}
+								<span className="sr-only">{showButtonLabel}</span>
+							</Button>
+						</TooltipTrigger>
+						<TooltipContent>{showButtonLabel}</TooltipContent>
+					</Tooltip>
 				)}
 				<CopyButton text={code} label="Copy code" />
 			</div>

diff --git a/site/src/components/Combobox/Combobox.tsx b/site/src/components/Combobox/Combobox.tsx
@@ -15,7 +15,6 @@ import {
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { Check, ChevronDown, CornerDownLeft, Info } from "lucide-react";
@@ -138,21 +137,19 @@ export const Combobox: FC<ComboboxProps> = ({
 											<Check className="size-icon-sm" />
 										)}
 										{option.description && (
-											<TooltipProvider delayDuration={100}>
-												<Tooltip>
-													<TooltipTrigger asChild>
-														<span
-															className="flex"
-															onMouseEnter={(e) => e.stopPropagation()}
-														>
-															<Info className="w-3.5 h-3.5 text-content-secondary" />
-														</span>
-													</TooltipTrigger>
-													<TooltipContent side="right" sideOffset={10}>
-														{option.description}
-													</TooltipContent>
-												</Tooltip>
-											</TooltipProvider>
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<span
+														className="flex"
+														onMouseEnter={(e) => e.stopPropagation()}
+													>
+														<Info className="w-3.5 h-3.5 text-content-secondary" />
+													</span>
+												</TooltipTrigger>
+												<TooltipContent side="right" sideOffset={10}>
+													{option.description}
+												</TooltipContent>
+											</Tooltip>
 										)}
 									</div>
 								</CommandItem>

diff --git a/site/src/components/CopyButton/CopyButton.tsx b/site/src/components/CopyButton/CopyButton.tsx
@@ -2,7 +2,6 @@ import { Button, type ButtonProps } from "components/Button/Button";
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClipboard } from "hooks/useClipboard";
@@ -22,21 +21,19 @@ export const CopyButton: FC<CopyButtonProps> = ({
 	const { showCopiedSuccess, copyToClipboard } = useClipboard();
 
 	return (
-		<TooltipProvider delayDuration={100}>
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<Button
-						size="icon"
-						variant="subtle"
-						onClick={() => copyToClipboard(text)}
-						{...buttonProps}
-					>
-						{showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
-						<span className="sr-only">{label}</span>
-					</Button>
-				</TooltipTrigger>
-				<TooltipContent>{label}</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Button
+					size="icon"
+					variant="subtle"
+					onClick={() => copyToClipboard(text)}
+					{...buttonProps}
+				>
+					{showCopiedSuccess ? <CheckIcon /> : <CopyIcon />}
+					<span className="sr-only">{label}</span>
+				</Button>
+			</TooltipTrigger>
+			<TooltipContent>{label}</TooltipContent>
+		</Tooltip>
 	);
 };
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -1,7 +1,6 @@
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { useClickable } from "hooks/useClickable";
@@ -37,55 +36,53 @@ export const CopyableValue: FC<CopyableValueProps> = ({
 	});
 
 	return (
-		<TooltipProvider delayDuration={100}>
-			<Tooltip
-				open={tooltipOpen}
-				onOpenChange={(shouldBeOpen) => {
-					// Always keep the tooltip open when in focus to handle issues when onOpenChange is unexpectedly false
-					if (!shouldBeOpen && isFocused) return;
-					setTooltipOpen(shouldBeOpen);
-				}}
-			>
-				<TooltipTrigger asChild>
-					<span
-						ref={clickableProps.ref}
-						{...attrs}
-						className={cn("cursor-pointer", className)}
-						role={role ?? clickableProps.role}
-						tabIndex={tabIndex ?? clickableProps.tabIndex}
-						onClick={(event) => {
-							clickableProps.onClick(event);
-							onClick?.(event);
-						}}
-						onKeyDown={(event) => {
-							clickableProps.onKeyDown(event);
-							onKeyDown?.(event);
-						}}
-						onKeyUp={(event) => {
-							clickableProps.onKeyUp(event);
-							onKeyUp?.(event);
-						}}
-						onMouseEnter={() => {
-							setIsFocused(true);
-							setTooltipOpen(true);
-						}}
-						onMouseLeave={() => {
-							setTooltipOpen(false);
-						}}
-						onFocus={() => {
-							setIsFocused(true);
-						}}
-						onBlur={() => {
-							setTooltipOpen(false);
-						}}
-					>
-						{children}
-					</span>
-				</TooltipTrigger>
-				<TooltipContent side={side}>
-					{showCopiedSuccess ? "Copied!" : "Click to copy"}
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+		<Tooltip
+			open={tooltipOpen}
+			onOpenChange={(shouldBeOpen) => {
+				// Always keep the tooltip open when in focus to handle issues when onOpenChange is unexpectedly false
+				if (!shouldBeOpen && isFocused) return;
+				setTooltipOpen(shouldBeOpen);
+			}}
+		>
+			<TooltipTrigger asChild>
+				<span
+					ref={clickableProps.ref}
+					{...attrs}
+					className={cn("cursor-pointer", className)}
+					role={role ?? clickableProps.role}
+					tabIndex={tabIndex ?? clickableProps.tabIndex}
+					onClick={(event) => {
+						clickableProps.onClick(event);
+						onClick?.(event);
+					}}
+					onKeyDown={(event) => {
+						clickableProps.onKeyDown(event);
+						onKeyDown?.(event);
+					}}
+					onKeyUp={(event) => {
+						clickableProps.onKeyUp(event);
+						onKeyUp?.(event);
+					}}
+					onMouseEnter={() => {
+						setIsFocused(true);
+						setTooltipOpen(true);
+					}}
+					onMouseLeave={() => {
+						setTooltipOpen(false);
+					}}
+					onFocus={() => {
+						setIsFocused(true);
+					}}
+					onBlur={() => {
+						setTooltipOpen(false);
+					}}
+				>
+					{children}
+				</span>
+			</TooltipTrigger>
+			<TooltipContent side={side}>
+				{showCopiedSuccess ? "Copied!" : "Click to copy"}
+			</TooltipContent>
+		</Tooltip>
 	);
 };
diff --git a/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx b/site/src/components/FeatureStageBadge/FeatureStageBadge.tsx
@@ -2,7 +2,6 @@ import { Link } from "components/Link/Link";
 import {
 	Tooltip,
 	TooltipContent,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import type { FC, HTMLAttributes, ReactNode } from "react";
@@ -47,40 +46,38 @@ export const FeatureStageBadge: FC<FeatureStageBadgeProps> = ({
 	const sizeClasses = badgeSizeClasses[size];
 
 	return (
-		<TooltipProvider delayDuration={100}>
-			<Tooltip>
-				<TooltipTrigger asChild>
-					<span
-						className={cn(
-							"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
-							sizeClasses,
-							colorClasses,
-							className,
-						)}
-						{...delegatedProps}
-					>
-						<span className="sr-only"> (This is a</span>
-						<span className="first-letter:uppercase">
-							{labelText && `${labelText} `}
-							{featureStageBadgeTypes[contentType]}
-						</span>
-						<span className="sr-only"> feature)</span>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<span
+					className={cn(
+						"block max-w-fit cursor-default flex-shrink-0 leading-none whitespace-nowrap border rounded-md transition-colors duration-200 ease-in-out bg-transparent border-solid border-transparent",
+						sizeClasses,
+						colorClasses,
+						className,
+					)}
+					{...delegatedProps}
+				>
+					<span className="sr-only"> (This is a</span>
+					<span className="first-letter:uppercase">
+						{labelText && `${labelText} `}
+						{featureStageBadgeTypes[contentType]}
 					</span>
-				</TooltipTrigger>
-				<TooltipContent align="start" className="max-w-xs text-sm">
-					<p className="m-0">
-						This feature has not yet reached general availability (GA).
-					</p>
+					<span className="sr-only"> feature)</span>
+				</span>
+			</TooltipTrigger>
+			<TooltipContent align="start" className="max-w-xs text-sm">
+				<p className="m-0">
+					This feature has not yet reached general availability (GA).
+				</p>
 
-					<Link
-						href={docs("/install/releases/feature-stages")}
-						className="font-semibold"
-					>
-						Learn about feature stages
-						<span className="sr-only"> (link opens in new tab)</span>
-					</Link>
-				</TooltipContent>
-			</Tooltip>
-		</TooltipProvider>
+				<Link
+					href={docs("/install/releases/feature-stages")}
+					className="font-semibold"
+				>
+					Learn about feature stages
+					<span className="sr-only"> (link opens in new tab)</span>
+				</Link>
+			</TooltipContent>
+		</Tooltip>
 	);
 };
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -11,7 +11,6 @@ import {
 	TooltipContent,
 	type TooltipContentProps,
 	type TooltipProps,
-	TooltipProvider,
 	TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
@@ -33,11 +32,7 @@ export const HelpTooltipTrigger = TooltipTrigger;
 export const HelpTooltipIcon = CircleHelpIcon;
 
 export const HelpTooltip: FC<TooltipProps> = (props) => {
-	return (
-		<TooltipProvider>
-			<Tooltip delayDuration={0} {...props} />
-		</TooltipProvider>
-	);
+	return <Tooltip {...props} />;
 };
 
 export const HelpTooltipContent: FC<TooltipContentProps> = ({