Sep 8, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025 · Aug 28, 2025
diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
 import {
 HelpTooltip,
 HelpTooltipContent,
 HelpTooltipIconTrigger,
 HelpTooltipText,
 HelpTooltipTitle,
 HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { FC } from "react";
 import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
 <div className="flex items-center gap-2">
 {interval === "day" ? "Daily" : "Weekly"} Active Users
 <HelpTooltip>
 <HelpTooltipTrigger size="small" />
 <HelpTooltipIconTrigger size="small" />
 <HelpTooltipContent>
 <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
 <HelpTooltipText>
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
 css,
 type Interpolation,
 type Theme,
 useTheme,
 } from "@emotion/react";
 import Link from "@mui/material/Link";
 import {
 Popover,
 PopoverContent,
 type PopoverContentProps,
 type PopoverProps,
 PopoverTrigger,
 usePopover,
 } from "components/deprecated/Popover/Popover";
 import { Stack } from "components/Stack/Stack";
 import {
 Tooltip,
 TooltipContent,
 type TooltipContentProps,
 type TooltipProps,
 TooltipProvider,
 TooltipTrigger,
 } from "components/Tooltip/Tooltip";
 import { CircleHelpIcon, ExternalLinkIcon } from "lucide-react";
 import {
 type FC,
 type PropsWithChildren,
 type ReactNode,
 } from "react";
 import { cn } from "utils/cn";

 type Icon = typeof CircleHelpIcon;

 type Size = "small" | "medium";

 export const HelpTooltipTrigger = TooltipTrigger;

 export const HelpTooltipIcon = CircleHelpIcon;

 export const HelpTooltip: FC<PopoverProps> = (props) => {
 return <Popover mode="hover" {...props} />;
 export const HelpTooltip: FC<TooltipProps> = (props) => {
 return (
 <TooltipProvider>
 <Tooltip delayDuration={0} {...props} />
 </TooltipProvider>
 );
 };

 export const HelpTooltipContent: FC<PopoverContentProps> = (props) => {
 const theme = useTheme();

 export const HelpTooltipContent: FC<TooltipContentProps> = ({
 className,
 ...props
 }) => {
 return (
 <PopoverContent
 <TooltipContent
 side="bottom"
 align="start"
 collisionPadding={16}
 {...props}
 css={{
 "& .MuiPaper-root": {
 fontSize: 14,
 width: 304,
 padding: 20,
 color: theme.palette.text.secondary,
 },
 }}
 className={cn(
 "w-[320px] p-5 bg-surface-secondary border-surface-quaternary text-sm",
 className,
 )}
 />
 );
 };

 typeHelpTooltipTriggerProps = HTMLAttributes<HTMLButtonElement> & {
 typeHelpTooltipIconTriggerProps = HTMLAttributes<HTMLButtonElement> & {
 size?: Size;
 hoverEffect?: boolean;
 };

 export constHelpTooltipTrigger = forwardRef<
 export constHelpTooltipIconTrigger = forwardRef<
 HTMLButtonElement,
 HelpTooltipTriggerProps
 HelpTooltipIconTriggerProps
 >((props, ref) => {
 const {
 size = "medium",
 });

 return (
 <PopoverTrigger>
 <HelpTooltipTrigger asChild>
 <button
 {...buttonProps}
 aria-label="More info"
 >
 {children}
 </button>
 </PopoverTrigger>
 </HelpTooltipTrigger>
 );
 });

 onClick,
 ariaLabel,
 }) => {
 const popover = usePopover();

 return (
 <button
 type="button"
 aria-label={ariaLabel ?? ""}
 css={styles.action}
 onClick={(event) => {
 event.stopPropagation();
 onClick();
 popover.setOpen(false);
 }}
 onClick={onClick}
 >
 <Icon css={styles.actionIcon} />
 {children}
diff --git a/site/src/components/InfoTooltip/InfoTooltip.stories.tsx b/site/src/components/InfoTooltip/InfoTooltip.stories.tsx
 import type { Meta, StoryObj } from "@storybook/react-vite";
 import { expect,userEvent, waitFor, within } from "storybook/test";
 import { expect,screen, userEvent, waitFor } from "storybook/test";
 import { InfoTooltip } from "./InfoTooltip";

 const meta = {
 type Story = StoryObj<typeof InfoTooltip>;

 export const Example: Story = {
 play: async ({ canvasElement, step }) => {
 const screen = within(canvasElement);

 play: async ({ step }) => {
 await step("activate hover trigger", async () => {
 await userEvent.hover(screen.getByRole("button"));
 await waitFor(() =>
 expect(screen.getByText(meta.args.message)).toBeInTheDocument(),
 expect(screen.getByRole("tooltip")).toHaveTextContent(
 meta.args.message,
 ),
 );
 });
 },
 type: "notice",
 message: "Unfortunately, there's a radio connected to my brain",
 },
 play: async ({ canvasElement, step }) => {
 const screen = within(canvasElement);

 play: async ({ step }) => {
 await step("activate hover trigger", async () => {
 await userEvent.hover(screen.getByRole("button"));
 await waitFor(() =>
 expect(screen.getByText(Notice.args.message)).toBeInTheDocument(),
 expect(screen.getByRole("tooltip")).toHaveTextContent(
 Notice.args.message,
 ),
 );
 });
 },
 type: "warning",
 message: "Unfortunately, there's a radio connected to my brain",
 },
 play: async ({ canvasElement, step }) => {
 const screen = within(canvasElement);

 play: async ({ step }) => {
 await step("activate hover trigger", async () => {
 await userEvent.hover(screen.getByRole("button"));
 await waitFor(() =>
 expect(screen.getByText(Warning.args.message)).toBeInTheDocument(),
 expect(screen.getByRole("tooltip")).toHaveTextContent(
 Warning.args.message,
 ),
 );
 });
 },
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
 HelpTooltip,
 HelpTooltipContent,
 HelpTooltipIcon,
 HelpTooltipIconTrigger,
 HelpTooltipText,
 HelpTooltipTitle,
 HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { FC, ReactNode } from "react";
 import type { ThemeRole } from "theme/roles";

 return (
 <HelpTooltip>
 <HelpTooltipTrigger size="small" css={styles.button}>
 <HelpTooltipIconTrigger size="small" css={styles.button}>
 <HelpTooltipIcon css={{ color: iconColor }} />
 </HelpTooltipTrigger>
 </HelpTooltipIconTrigger>
 <HelpTooltipContent>
 <HelpTooltipTitle>{title}</HelpTooltipTitle>
 <HelpTooltipText>{message}</HelpTooltipText>

 const styles = {
 button: css`
 opacity: 1;
 opacity: 1;

 &:hover {
 opacity: 1;
 }
 `,
 &:hover {
 opacity: 1;
 }
 `,
 } satisfies Record<string, Interpolation<Theme>>;
diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx

 export const TooltipProvider = TooltipPrimitive.Provider;

 export type TooltipProps = TooltipPrimitive.TooltipProps;

 export const Tooltip = TooltipPrimitive.Root;

 export const TooltipTrigger = TooltipPrimitive.Trigger;

 export type TooltipContentProps = React.ComponentPropsWithoutRef<
 typeof TooltipPrimitive.Content
 > & {
 disablePortal?: boolean;
 };

 export const TooltipContent = React.forwardRef<
 React.ElementRef<typeof TooltipPrimitive.Content>,
 React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
 disablePortal?: boolean;
 }
 TooltipContentProps
 >(({ className, sideOffset = 4, disablePortal, ...props }, ref) => {
 const content = (
 <TooltipPrimitive.Content
diff --git a/site/src/components/deprecated/Popover/Popover.tsx b/site/src/components/deprecated/Popover/Popover.tsx
 onOpenChange: (open: boolean) => void;
 };

 exporttype PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps;
 type PopoverProps = UncontrolledPopoverProps | ControlledPopoverProps;

 /** @deprecated prefer `components.Popover` */
 export const Popover: FC<PopoverProps> = (props) => {

 type Horizontal = "left" | "right";

 exporttype PopoverContentProps = Omit<
 type PopoverContentProps = Omit<
 MuiPopoverProps,
 "open" | "onClose" | "anchorEl"
 > & {
diff --git a/site/src/modules/resources/AgentLatency.tsx b/site/src/modules/resources/AgentLatency.tsx
 import { type Theme, useTheme } from "@emotion/react";
 import type { DERPRegion, WorkspaceAgent } from "api/typesGenerated";
 import { PopoverTrigger } from "components/deprecated/Popover/Popover";
 import {
 HelpTooltip,
 HelpTooltipContent,
 HelpTooltipText,
 HelpTooltipTitle,
 HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
 import type { FC } from "react";

 return (
 <HelpTooltip>
 <PopoverTrigger>
 <HelpTooltipTrigger asChild>
 <span
 role="presentation"
 aria-label="latency"
 css={{ cursor: "pointer", color: latency.color }}
 >
 {Math.round(latency.latency_ms)}ms
 </span>
 </PopoverTrigger>
 </HelpTooltipTrigger>
 <HelpTooltipContent>
 <HelpTooltipTitle>Latency</HelpTooltipTitle>
 <HelpTooltipText>
 This is the latency overhead on non peer to peer connections. The
 first row is the preferred relay.
 </HelpTooltipText>
 <HelpTooltipText>
 <Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
 {Object.entries(agent.latency)
 .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
 .map(([regionName, region]) => (
 <Stack
 direction="row"
 key={regionName}
 spacing={0.5}
 justifyContent="space-between"
 css={
 region.preferred && {
 color: theme.palette.text.primary,
 }
 <Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
 {Object.entries(agent.latency)
 .sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
 .map(([regionName, region]) => (
 <Stack
 direction="row"
 key={regionName}
 spacing={0.5}
 justifyContent="space-between"
 css={
 region.preferred && {
 color: theme.palette.text.primary,
 }
 >
 <strong>{regionName}</strong>
 {Math.round(region.latency_ms)}ms
 </Stack>
 ))}
 </Stack>
 </HelpTooltipText>
 }
 >
 <strong>{regionName}</strong>
 {Math.round(region.latency_ms)}ms
 </Stack>
 ))}
 </Stack>
 </HelpTooltipContent>
 </HelpTooltip>
 );
Original file line number	Diff line number	Diff line change
Expand Up		@@ -7,9 +7,9 @@ import {
		import {
		HelpTooltip,
		HelpTooltipContent,
		HelpTooltipIconTrigger,
		HelpTooltipText,
		HelpTooltipTitle,
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import type { FC } from "react";
		import { Area, AreaChart, CartesianGrid, XAxis, YAxis } from "recharts";
Expand DownExpand Up		@@ -116,7 +116,7 @@ export const ActiveUsersTitle: FC<ActiveUsersTitleProps> = ({ interval }) => {
		<div className="flex items-center gap-2">
		{interval === "day" ? "Daily" : "Weekly"} Active Users
		<HelpTooltip>
		<HelpTooltipTrigger size="small" />
		<HelpTooltipIconTrigger size="small" />
		<HelpTooltipContent>
		<HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
		<HelpTooltipText>
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,5 +1,5 @@
		import type { Meta, StoryObj } from "@storybook/react-vite";
		import { expect,userEvent, waitFor, within } from "storybook/test";
		import { expect,screen, userEvent, waitFor } from "storybook/test";
		import { InfoTooltip } from "./InfoTooltip";

		const meta = {
Expand All		@@ -16,13 +16,13 @@ export default meta;
		type Story = StoryObj<typeof InfoTooltip>;

		export const Example: Story = {
		play: async ({ canvasElement, step }) => {
		const screen = within(canvasElement);

		play: async ({ step }) => {
		await step("activate hover trigger", async () => {
		await userEvent.hover(screen.getByRole("button"));
		await waitFor(() =>
		expect(screen.getByText(meta.args.message)).toBeInTheDocument(),
		expect(screen.getByRole("tooltip")).toHaveTextContent(
		meta.args.message,
		),
Comment on lines +23 to +25 Copy link Member ParkreinerSep 3, 2025 Choose a reason for hiding this comment The reason will be displayed to describe this comment to others.Learn more. Big fan of the more accessible selectors aqandrew reacted with laugh emoji
		);
		});
		},
Expand All		@@ -33,13 +33,13 @@ export const Notice = {
		type: "notice",
		message: "Unfortunately, there's a radio connected to my brain",
		},
		play: async ({ canvasElement, step }) => {
		const screen = within(canvasElement);

		play: async ({ step }) => {
		await step("activate hover trigger", async () => {
		await userEvent.hover(screen.getByRole("button"));
		await waitFor(() =>
		expect(screen.getByText(Notice.args.message)).toBeInTheDocument(),
		expect(screen.getByRole("tooltip")).toHaveTextContent(
		Notice.args.message,
		),
		);
		});
		},
Expand All		@@ -50,13 +50,13 @@ export const Warning = {
		type: "warning",
		message: "Unfortunately, there's a radio connected to my brain",
		},
		play: async ({ canvasElement, step }) => {
		const screen = within(canvasElement);

		play: async ({ step }) => {
		await step("activate hover trigger", async () => {
		await userEvent.hover(screen.getByRole("button"));
		await waitFor(() =>
		expect(screen.getByText(Warning.args.message)).toBeInTheDocument(),
		expect(screen.getByRole("tooltip")).toHaveTextContent(
		Warning.args.message,
		),
		);
		});
		},
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,9 +3,9 @@ import {
		HelpTooltip,
		HelpTooltipContent,
		HelpTooltipIcon,
		HelpTooltipIconTrigger,
		HelpTooltipText,
		HelpTooltipTitle,
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import type { FC, ReactNode } from "react";
		import type { ThemeRole } from "theme/roles";
Expand All		@@ -26,9 +26,9 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({

		return (
		<HelpTooltip>
		<HelpTooltipTrigger size="small" css={styles.button}>
		<HelpTooltipIconTrigger size="small" css={styles.button}>
		<HelpTooltipIcon css={{ color: iconColor }} />
		</HelpTooltipTrigger>
		</HelpTooltipIconTrigger>
		<HelpTooltipContent>
		<HelpTooltipTitle>{title}</HelpTooltipTitle>
		<HelpTooltipText>{message}</HelpTooltipText>
Expand All		@@ -39,10 +39,10 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({

		const styles = {
		button: css`
		opacity: 1;
		opacity: 1;

		&:hover {
		opacity: 1;
		}
		`,
		&:hover {
		opacity: 1;
		}
		`,
		} satisfies Record<string, Interpolation<Theme>>;
Original file line number	Diff line number	Diff line change
Expand Up		@@ -8,15 +8,21 @@ import { cn } from "utils/cn";

		export const TooltipProvider = TooltipPrimitive.Provider;

		export type TooltipProps = TooltipPrimitive.TooltipProps;

		export const Tooltip = TooltipPrimitive.Root;

		export const TooltipTrigger = TooltipPrimitive.Trigger;

		export type TooltipContentProps = React.ComponentPropsWithoutRef<
		typeof TooltipPrimitive.Content
		> & {
		disablePortal?: boolean;
		};

		export const TooltipContent = React.forwardRef<
		React.ElementRef<typeof TooltipPrimitive.Content>,
		React.ComponentPropsWithoutRef<typeof TooltipPrimitive.Content> & {
		disablePortal?: boolean;
		}
		TooltipContentProps
		>(({ className, sideOffset = 4, disablePortal, ...props }, ref) => {
		const content = (
		<TooltipPrimitive.Content
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -60,7 +60,7 @@ type ControlledPopoverProps = BasePopoverProps & {
		onOpenChange: (open: boolean) => void;
		};

		exporttype PopoverProps = UncontrolledPopoverProps \| ControlledPopoverProps;
		type PopoverProps = UncontrolledPopoverProps \| ControlledPopoverProps;

		/** @deprecated prefer `components.Popover` */
		export const Popover: FC<PopoverProps> = (props) => {
Expand DownExpand Up		@@ -155,7 +155,7 @@ export const PopoverTrigger: FC<PopoverTriggerProps> = (props) => {

		type Horizontal = "left" \| "right";

		exporttype PopoverContentProps = Omit<
		type PopoverContentProps = Omit<
		MuiPopoverProps,
		"open" \| "onClose" \| "anchorEl"
		> & {
Expand Down
Original file line number	Diff line number	Diff line change
		@@ -1,11 +1,11 @@
		import { type Theme, useTheme } from "@emotion/react";
		import type { DERPRegion, WorkspaceAgent } from "api/typesGenerated";
		import { PopoverTrigger } from "components/deprecated/Popover/Popover";
		import {
		HelpTooltip,
		HelpTooltipContent,
		HelpTooltipText,
		HelpTooltipTitle,
		HelpTooltipTrigger,
		} from "components/HelpTooltip/HelpTooltip";
		import { Stack } from "components/Stack/Stack";
		import type { FC } from "react";
Expand DownExpand Up		@@ -44,43 +44,41 @@ export const AgentLatency: FC<AgentLatencyProps> = ({ agent }) => {

		return (
		<HelpTooltip>
		<PopoverTrigger>
		<HelpTooltipTrigger asChild>
		<span
		role="presentation"
		aria-label="latency"
		css={{ cursor: "pointer", color: latency.color }}
		>
		{Math.round(latency.latency_ms)}ms
		</span>
		</PopoverTrigger>
		</HelpTooltipTrigger>
		<HelpTooltipContent>
		<HelpTooltipTitle>Latency</HelpTooltipTitle>
		<HelpTooltipText>
		This is the latency overhead on non peer to peer connections. The
		first row is the preferred relay.
		</HelpTooltipText>
		<HelpTooltipText>
		<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
		{Object.entries(agent.latency)
		.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
		.map(([regionName, region]) => (
		<Stack
		direction="row"
		key={regionName}
		spacing={0.5}
		justifyContent="space-between"
		css={
		region.preferred && {
		color: theme.palette.text.primary,
		}
		<Stack direction="column" spacing={1} css={{ marginTop: 16 }}>
		{Object.entries(agent.latency)
		.sort(([, a], [, b]) => a.latency_ms - b.latency_ms)
		.map(([regionName, region]) => (
		<Stack
		direction="row"
		key={regionName}
		spacing={0.5}
		justifyContent="space-between"
		css={
		region.preferred && {
		color: theme.palette.text.primary,
		}
		>
		<strong>{regionName}</strong>
		{Math.round(region.latency_ms)}ms
		</Stack>
		))}
		</Stack>
		</HelpTooltipText>
		}
		>
		<strong>{regionName}</strong>
		{Math.round(region.latency_ms)}ms
		</Stack>
		))}
		</Stack>
		</HelpTooltipContent>
		</HelpTooltip>
		);
Expand Down