From f95a5202bf243df309d0cd4f46d6436e82413fbe Mon Sep 17 00:00:00 2001
From: code-qtzl <122120619+code-qtzl@users.noreply.github.com>
Date: Thu, 9 Apr 2026 00:34:29 -0500
Subject: [PATCH] =?UTF-8?q?fix(site/src/pages/CreateWorkspacePage):=20repl?=
 =?UTF-8?q?ace=20Tooltip=20with=20HelpPop=E2=80=A6=20(#24057)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace Tooltip with `HelpPopover` in the "New workspace" page header.
`HelpPopover` supports interactive content like links and provides
better layout control, making it a better fit for this use case.
---
 .../CreateWorkspacePageView.tsx               | 24 +++++++++----------
 1 file changed, 11 insertions(+), 13 deletions(-)

diff --git a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
index a52d4c53db..42023bb56e 100644
--- a/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
+++ b/site/src/pages/CreateWorkspacePage/CreateWorkspacePageView.tsx
@@ -1,5 +1,5 @@
 import { type FormikContextType, useFormik } from "formik";
-import { ArrowLeft, CircleHelp, ExternalLinkIcon } from "lucide-react";
+import { ArrowLeft, ExternalLinkIcon } from "lucide-react";
 import {
 	type FC,
 	useCallback,
@@ -27,16 +27,16 @@ import {
 	ComboboxItem,
 	ComboboxTrigger,
 } from "#/components/Combobox/Combobox";
+import {
+	HelpPopover,
+	HelpPopoverContent,
+	HelpPopoverIconTrigger,
+} from "#/components/HelpPopover/HelpPopover";
 import { Input } from "#/components/Input/Input";
 import { Label } from "#/components/Label/Label";
 import { Link } from "#/components/Link/Link";
 import { Spinner } from "#/components/Spinner/Spinner";
 import { Switch } from "#/components/Switch/Switch";
-import {
-	Tooltip,
-	TooltipContent,
-	TooltipTrigger,
-} from "#/components/Tooltip/Tooltip";
 import { WorkspaceUserAutocomplete } from "#/components/UserAutocomplete/UserAutocomplete";
 import { useDebouncedFunction } from "#/hooks/debounce";
 import type { ExternalAuthPollingState } from "#/hooks/useExternalAuth";
@@ -420,11 +420,9 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 					<span className="flex flex-row items-center gap-2">
 						<h1 className="text-3xl font-semibold m-0">New workspace</h1>
 
-						<Tooltip>
-							<TooltipTrigger asChild>
-								<CircleHelp className="size-icon-xs text-content-secondary" />
-							</TooltipTrigger>
-							<TooltipContent className="max-w-xs text-sm">
+						<HelpPopover>
+							<HelpPopoverIconTrigger />
+							<HelpPopoverContent className="max-w-xs text-sm">
 								Dynamic Parameters enhances Coder's existing parameter system
 								with real-time validation, conditional parameter behavior, and
 								richer input types.
@@ -436,8 +434,8 @@ export const CreateWorkspacePageView: FC<CreateWorkspacePageViewProps> = ({
 								>
 									View docs
 								</Link>
-							</TooltipContent>
-						</Tooltip>
+							</HelpPopoverContent>
+						</HelpPopover>
 					</span>
 				</header>