refactor: replace MUI Tooltip with MiniTooltip

coder · aqandrew · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025 · Sep 30, 2025
commit 3e71889702af5e86c09391ba4de2b6fcf7fe2f4e
diff --git a/site/src/components/CopyableValue/CopyableValue.tsx b/site/src/components/CopyableValue/CopyableValue.tsx
@@ -1,18 +1,17 @@
-import Tooltip, { type TooltipProps } from "@mui/material/Tooltip";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
+import { TooltipContentProps } from "components/Tooltip/Tooltip";
 import { useClickable } from "hooks/useClickable";
 import { useClipboard } from "hooks/useClipboard";
 import type { FC, HTMLAttributes } from "react";
 
 interface CopyableValueProps extends HTMLAttributes<HTMLSpanElement> {
 	value: string;
-	placement?: TooltipProps["placement"];
-	PopperProps?: TooltipProps["PopperProps"];
+	align?: TooltipContentProps["align"];
 }
 
 export const CopyableValue: FC<CopyableValueProps> = ({
 	value,
-	placement = "bottom-start",
-	PopperProps,
+	align = "start",
 	children,
 	...attrs
 }) => {
@@ -22,14 +21,13 @@ export const CopyableValue: FC<CopyableValueProps> = ({
 	const clickableProps = useClickable<HTMLSpanElement>(copyToClipboard);
 
 	return (
-		<Tooltip
+		<MiniTooltip
 			title={showCopiedSuccess ? "Copied!" : "Click to copy"}
-			placement={placement}
-			PopperProps={PopperProps}
+			align={align}
 		>
 			<span {...attrs} {...clickableProps} css={{ cursor: "pointer" }}>
 				{children}
 			</span>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
diff --git a/site/src/components/Latency/Latency.tsx b/site/src/components/Latency/Latency.tsx
@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
 import CircularProgress from "@mui/material/CircularProgress";
-import Tooltip from "@mui/material/Tooltip";
 import { Abbr } from "components/Abbr/Abbr";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { CircleHelpIcon } from "lucide-react";
 import type { FC } from "react";
 import { cn } from "utils/cn";
@@ -26,23 +26,24 @@ export const Latency: FC<LatencyProps> = ({
 
 	if (isLoading) {
 		return (
-			<Tooltip title="Loading latency..." className={className}>
+			<MiniTooltip title="Loading latency..." className={className}>
+				{/* TODO trigger's variable height from spinning causes tooltip to jitter up/down */}
 				<CircularProgress
 					className={cn("!size-icon-xs", iconClassName)}
 					style={{ color }}
 				/>
-			</Tooltip>
+			</MiniTooltip>
 		);
 	}
 
 	if (!latency) {
 		return (
-			<Tooltip title="Latency not available" className={className}>
+			<MiniTooltip title="Latency not available" className={className}>
 				<CircleHelpIcon
 					className={cn("!size-icon-sm", iconClassName)}
 					style={{ color }}
 				/>
-			</Tooltip>
+			</MiniTooltip>
 		);
 	}
 

diff --git a/site/src/components/MiniTooltip/MiniTooltip.tsx b/site/src/components/MiniTooltip/MiniTooltip.tsx
@@ -0,0 +1,41 @@
+import {
+	Tooltip,
+	TooltipArrow,
+	TooltipContent,
+	TooltipContentProps,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
+import type { FC } from "react";
+import { cn } from "utils/cn";
+
+type MiniTooltipProps = TooltipContentProps & {
+	title: string;
+	arrow?: boolean;
+};
+
+const MiniTooltip: FC<MiniTooltipProps> = (props) => {
+	const { title, children, arrow, ...contentProps } = props;
+
+	return (
+		<TooltipProvider>
+			<Tooltip delayDuration={0}>
+				<TooltipTrigger asChild>{children}</TooltipTrigger>
+				<TooltipContent
+					collisionPadding={16}
+					side="bottom"
+					{...contentProps}
+					className={cn(
+						"max-w-[300px] bg-surface-secondary border-surface-quaternary text-content-primary text-xs",
+						contentProps.className,
+					)}
+				>
+					{title}
+					{arrow && <TooltipArrow className="fill-surface-quaternary" />}
+				</TooltipContent>
+			</Tooltip>
+		</TooltipProvider>
+	);
+};
+
+export default MiniTooltip;
diff --git a/site/src/components/SearchField/SearchField.tsx b/site/src/components/SearchField/SearchField.tsx
@@ -1,7 +1,7 @@
 import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { useEffectEvent } from "hooks/hookPolyfills";
 import { SearchIcon, XIcon } from "lucide-react";
 import { type FC, useLayoutEffect, useRef } from "react";
@@ -47,7 +47,7 @@ export const SearchField: FC<SearchFieldProps> = ({
 				),
 				endAdornment: value !== "" && (
 					<InputAdornment position="end">
-						<Tooltip title="Clear search">
+						<MiniTooltip title="Clear search">
 							<IconButton
 								size="small"
 								onClick={() => {
@@ -57,7 +57,7 @@ export const SearchField: FC<SearchFieldProps> = ({
 								<XIcon className="size-icon-xs" />
 								<span className="sr-only">Clear search</span>
 							</IconButton>
-						</Tooltip>
+						</MiniTooltip>
 					</InputAdornment>
 				),
 				...InputProps,

diff --git a/site/src/components/Tooltip/Tooltip.tsx b/site/src/components/Tooltip/Tooltip.tsx
@@ -14,6 +14,8 @@ export const Tooltip = TooltipPrimitive.Root;
 
 export const TooltipTrigger = TooltipPrimitive.Trigger;
 
+export const TooltipArrow = TooltipPrimitive.Arrow;
+
 export type TooltipContentProps = React.ComponentPropsWithoutRef<
 	typeof TooltipPrimitive.Content
 > & {

diff --git a/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx b/site/src/modules/dashboard/Navbar/UserDropdown/UserDropdownContent.tsx
@@ -7,11 +7,11 @@ import {
 import Divider from "@mui/material/Divider";
 import MenuItem from "@mui/material/MenuItem";
 import type { SvgIconProps } from "@mui/material/SvgIcon";
-import Tooltip from "@mui/material/Tooltip";
 import { PopoverClose } from "@radix-ui/react-popover";
 import type * as TypesGen from "api/typesGenerated";
 import { CopyButton } from "components/CopyButton/CopyButton";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import {
 	BookOpenTextIcon,
@@ -121,7 +121,7 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 			<Divider css={{ marginBottom: "0 !important" }} />
 
 			<Stack css={styles.info} spacing={0}>
-				<Tooltip title="Browse the source code">
+				<MiniTooltip title="Browse the source code">
 					<a
 						css={[styles.footerText, styles.buildInfo]}
 						href={buildInfo?.external_url}
@@ -130,15 +130,15 @@ export const UserDropdownContent: FC<UserDropdownContentProps> = ({
 					>
 						{buildInfo?.version} <SquareArrowOutUpRightIcon />
 					</a>
-				</Tooltip>
+				</MiniTooltip>
 
 				{buildInfo?.deployment_id && (
 					<div className="flex items-center text-xs">
-						<Tooltip title="Deployment Identifier">
+						<MiniTooltip title="Deployment Identifier">
 							<span className="whitespace-nowrap overflow-hidden text-ellipsis">
 								{buildInfo.deployment_id}
 							</span>
-						</Tooltip>
+						</MiniTooltip>
 						<CopyButton
 							text={buildInfo.deployment_id}
 							label="Copy deployment ID"

diff --git a/site/src/modules/provisioners/Provisioner.tsx b/site/src/modules/provisioners/Provisioner.tsx
@@ -1,6 +1,6 @@
 import { useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
 import type { HealthMessage, ProvisionerDaemon } from "api/typesGenerated";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Pill } from "components/Pill/Pill";
 import { Building2Icon, UserIcon } from "lucide-react";
 import type { FC } from "react";
@@ -74,7 +74,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 						justifyContent: "right",
 					}}
 				>
-					<Tooltip title="Scope">
+					<MiniTooltip title="Scope">
 						<Pill size="lg" icon={iconScope}>
 							<span
 								css={{
@@ -84,7 +84,7 @@ export const Provisioner: FC<ProvisionerProps> = ({
 								{daemonScope}
 							</span>
 						</Pill>
-					</Tooltip>
+					</MiniTooltip>
 					{extraTags.map(([key, value]) => (
 						<ProvisionerTag key={key} tagName={key} tagValue={value} />
 					))}

diff --git a/site/src/modules/resources/AgentMetadata.tsx b/site/src/modules/resources/AgentMetadata.tsx
@@ -1,12 +1,12 @@
 import Skeleton from "@mui/material/Skeleton";
-import Tooltip from "@mui/material/Tooltip";
 import { watchAgentMetadata } from "api/api";
 import type {
 	ServerSentEvent,
 	WorkspaceAgent,
 	WorkspaceAgentMetadata,
 } from "api/typesGenerated";
 import { displayError } from "components/GlobalSnackbar/utils";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import {
@@ -183,11 +183,11 @@ const MetadataItem: FC<MetadataItemProps> = ({ item }) => {
 		status === "loading" ? (
 			<Skeleton width={65} height={12} variant="text" className="mt-[6px]" />
 		) : status === "stale" ? (
-			<Tooltip title="This data is stale and no longer up to date">
+			<MiniTooltip title="This data is stale and no longer up to date">
 				<StaticWidth className="text-ellipsis overflow-hidden whitespace-nowrap max-w-64 text-sm text-content-disabled cursor-pointer">
 					{item.result.value}
 				</StaticWidth>
-			</Tooltip>
+			</MiniTooltip>
 		) : (
 			<StaticWidth
 				className={cn(

diff --git a/site/src/modules/resources/AgentRow.stories.tsx b/site/src/modules/resources/AgentRow.stories.tsx
@@ -141,6 +141,13 @@ export const BunchOfApps: Story = {
 	},
 };
 
+export const Disconnected: Story = {
+	args: {
+		agent: M.MockWorkspaceAgentDisconnected,
+		initialMetadata: [],
+	},
+};
+
 export const Connecting: Story = {
 	args: {
 		agent: M.MockWorkspaceAgentConnecting,

diff --git a/site/src/modules/resources/AgentStatus.tsx b/site/src/modules/resources/AgentStatus.tsx
@@ -1,6 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import type {
 	WorkspaceAgent,
 	WorkspaceAgentDevcontainer,
@@ -13,6 +12,7 @@ import {
 	HelpTooltipTitle,
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { TriangleAlertIcon } from "lucide-react";
 import type { FC } from "react";
 
@@ -35,13 +35,13 @@ const ReadyLifecycle: FC = () => {
 
 const StartingLifecycle: FC = () => {
 	return (
-		<Tooltip title="Starting...">
+		<MiniTooltip title="Starting...">
 			<div
 				role="status"
 				aria-label="Starting..."
 				css={[styles.status, styles.connecting]}
 			/>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
@@ -110,13 +110,13 @@ const StartErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 
 const ShuttingDownLifecycle: FC = () => {
 	return (
-		<Tooltip title="Stopping...">
+		<MiniTooltip title="Stopping...">
 			<div
 				role="status"
 				aria-label="Stopping..."
 				css={[styles.status, styles.connecting]}
 			/>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
@@ -170,13 +170,13 @@ const ShutdownErrorLifecycle: FC<AgentStatusProps> = ({ agent }) => {
 
 const OffLifecycle: FC = () => {
 	return (
-		<Tooltip title="Stopped">
+		<MiniTooltip title="Stopped">
 			<div
 				role="status"
 				aria-label="Stopped"
 				css={[styles.status, styles.disconnected]}
 			/>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
@@ -218,25 +218,25 @@ const ConnectedStatus: FC<AgentStatusProps> = ({ agent }) => {
 
 const DisconnectedStatus: FC = () => {
 	return (
-		<Tooltip title="Disconnected">
+		<MiniTooltip title="Disconnected">
 			<div
 				role="status"
 				aria-label="Disconnected"
 				css={[styles.status, styles.disconnected]}
 			/>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
 const ConnectingStatus: FC = () => {
 	return (
-		<Tooltip title="Connecting...">
+		<MiniTooltip title="Connecting...">
 			<div
 				role="status"
 				aria-label="Connecting..."
 				css={[styles.status, styles.connecting]}
 			/>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 

diff --git a/site/src/modules/resources/ResourceCard.tsx b/site/src/modules/resources/ResourceCard.tsx
@@ -1,10 +1,10 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import type { WorkspaceAgent, WorkspaceResource } from "api/typesGenerated";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
 import { MemoizedInlineMarkdown } from "components/Markdown/Markdown";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import { Children, type FC, type JSX, useState } from "react";
 import { ResourceAvatar } from "./ResourceAvatar";
@@ -162,7 +162,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 					})}
 				</div>
 				{mLength > 4 && (
-					<Tooltip
+					<MiniTooltip
 						title={
 							shouldDisplayAllMetadata ? "Hide metadata" : "Show all metadata"
 						}
@@ -175,7 +175,7 @@ export const ResourceCard: FC<ResourceCardProps> = ({ resource, agentRow }) => {
 						>
 							<DropdownArrow margin={false} close={shouldDisplayAllMetadata} />
 						</IconButton>
-					</Tooltip>
+					</MiniTooltip>
 				)}
 			</Stack>