chore: rm unused import

text content

site/src/components/Badges/Badges.tsx

@@ -1,5 +1,5 @@
 import type { Interpolation, Theme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import {
 	type FC,
@@ -69,17 +69,17 @@ export const NotHealthyBadge: FC = () => {
 
 export const NotRegisteredBadge: FC = () => {
 	return (
-		<Tooltip title="Workspace Proxy has never come online and needs to be started.">
+		<MiniTooltip title="Workspace Proxy has never come online and needs to be started.">
 			<span css={[styles.badge, styles.warnBadge]}>Never seen</span>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
 export const NotReachableBadge: FC = () => {
 	return (
-		<Tooltip title="Workspace Proxy not responding to http(s) requests.">
+		<MiniTooltip title="Workspace Proxy not responding to http(s) requests.">
 			<span css={[styles.badge, styles.warnBadge]}>Not reachable</span>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 

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 type { 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> = ({
 	});
 
 	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>
 	);
 };

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,29 @@ export const Latency: FC<LatencyProps> = ({
 
 	if (isLoading) {
 		return (
-			<Tooltip title="Loading latency..." className={className}>
-				<CircularProgress
-					className={cn("!size-icon-xs", iconClassName)}
-					style={{ color }}
-				/>
-			</Tooltip>
+			<MiniTooltip title="Loading latency..." className={className}>
+				{/**
+				 * Spinning progress icon must be placed inside a fixed-size container,
+				 * to ensure tooltip remains stationary when opened
+				 */}
+				<div className="size-4 flex flex-wrap place-content-center">
+					<CircularProgress
+						className={cn("!size-icon-xs", iconClassName)}
+						style={{ color }}
+					/>
+				</div>
+			</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>
 		);
 	}
 

site/src/components/MiniTooltip/MiniTooltip.tsx

@@ -0,0 +1,53 @@
+import {
+	Tooltip,
+	TooltipArrow,
+	TooltipContent,
+	type TooltipContentProps,
+	TooltipProvider,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
+import { type FC, type ReactNode, useState } from "react";
+import { cn } from "utils/cn";
+
+type MiniTooltipProps = Omit<TooltipContentProps, "title"> & {
+	title: ReactNode;
+	arrow?: boolean;
+	open?: boolean;
+};
+
+const MiniTooltip: FC<MiniTooltipProps> = ({
+	title,
+	children,
+	arrow,
+	open = false,
+	...contentProps
+}) => {
+	const [isOpen, setIsOpen] = useState(open);
+
+	return (
+		<TooltipProvider>
+			<Tooltip delayDuration={0} open={isOpen} onOpenChange={setIsOpen}>
+				<TooltipTrigger
+					asChild
+					aria-label={typeof title === "string" ? title : undefined}
+				>
+					{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;

site/src/components/RichParameterInput/RichParameterInput.tsx

@@ -5,11 +5,11 @@ import type { InputBaseComponentProps } from "@mui/material/InputBase";
 import Radio from "@mui/material/Radio";
 import RadioGroup from "@mui/material/RadioGroup";
 import TextField, { type TextFieldProps } from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
 import type { TemplateVersionParameter } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
 import { ExternalImage } from "components/ExternalImage/ExternalImage";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
 import { CircleAlertIcon, SettingsIcon } from "lucide-react";
@@ -136,26 +136,26 @@ const ParameterLabel: FC<ParameterLabelProps> = ({ parameter, isPreset }) => {
 			{displayName}
 
 			{!parameter.required && (
-				<Tooltip title="If no value is specified, the system will default to the value set by the administrator.">
+				<MiniTooltip title="If no value is specified, the system will default to the value set by the administrator.">
 					<span css={styles.optionalLabel}>(optional)</span>
-				</Tooltip>
+				</MiniTooltip>
 			)}
 			{!parameter.mutable && (
-				<Tooltip title="This value cannot be modified after the workspace has been created.">
+				<MiniTooltip title="This value cannot be modified after the workspace has been created.">
 					<Pill
 						type="warning"
 						icon={<CircleAlertIcon className="size-icon-xs" />}
 					>
 						Immutable
 					</Pill>
-				</Tooltip>
+				</MiniTooltip>
 			)}
 			{isPreset && (
-				<Tooltip title="This value was set by a preset">
+				<MiniTooltip title="This value was set by a preset">
 					<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
 						Preset
 					</Pill>
-				</Tooltip>
+				</MiniTooltip>
 			)}
 		</span>
 	);
@@ -328,7 +328,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
 										css={{ padding: small ? undefined : "4px 0" }}
 									>
 										{small ? (
-											<Tooltip
+											<MiniTooltip
 												title={
 													<MemoizedMarkdown>
 														{option.description}
@@ -336,7 +336,7 @@ const RichParameterField: FC<RichParameterInputProps> = ({
 												}
 											>
 												<div>{option.name}</div>
-											</Tooltip>
+											</MiniTooltip>
 										) : (
 											<>
 												<span>{option.name}</span>

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,

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
 > & {

site/src/modules/dashboard/DeploymentBanner/DeploymentBannerView.tsx

@@ -1,6 +1,5 @@
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import type {
 	DeploymentStats,
 	HealthcheckReport,
@@ -12,6 +11,7 @@ import { JetBrainsIcon } from "components/Icons/JetBrainsIcon";
 import { RocketIcon } from "components/Icons/RocketIcon";
 import { TerminalIcon } from "components/Icons/TerminalIcon";
 import { VSCodeIcon } from "components/Icons/VSCodeIcon";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import dayjs from "dayjs";
 import {
@@ -124,11 +124,8 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 				whiteSpace: "nowrap",
 			}}
 		>
-			<Tooltip
-				classes={{
-					tooltip:
-						"ml-3 mb-1 w-[400px] p-4 text-sm text-content-primary bg-surface-secondary border border-solid border-border pointer-events-none",
-				}}
+			<MiniTooltip
+				className="w-[400px] p-4 text-sm pointer-events-none"
 				title={
 					healthErrors.length > 0 ? (
 						<>
@@ -146,7 +143,6 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 					)
 				}
 				open={process.env.STORYBOOK === "true" ? true : undefined}
-				css={{ marginRight: -16 }}
 			>
 				{healthErrors.length > 0 ? (
 					<Link
@@ -161,7 +157,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						<RocketIcon />
 					</div>
 				)}
-			</Tooltip>
+			</MiniTooltip>
 
 			<div css={styles.group}>
 				<div css={styles.category}>Workspaces</div>
@@ -194,26 +190,28 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 			</div>
 
 			<div css={styles.group}>
-				<Tooltip title={`Activity in the last ~${aggregatedMinutes} minutes`}>
+				<MiniTooltip
+					title={`Activity in the last ~${aggregatedMinutes} minutes`}
+				>
 					<div css={styles.category}>Transmission</div>
-				</Tooltip>
+				</MiniTooltip>
 
 				<div css={styles.values}>
-					<Tooltip title="Data sent to workspaces">
+					<MiniTooltip title="Data sent to workspaces">
 						<div css={styles.value}>
 							<CloudDownloadIcon className="size-icon-xs" />
 							{stats ? prettyBytes(stats.workspaces.rx_bytes) : "-"}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 					<ValueSeparator />
-					<Tooltip title="Data sent from workspaces">
+					<MiniTooltip title="Data sent from workspaces">
 						<div css={styles.value}>
 							<CloudUploadIcon className="size-icon-xs" />
 							{stats ? prettyBytes(stats.workspaces.tx_bytes) : "-"}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 					<ValueSeparator />
-					<Tooltip
+					<MiniTooltip
 						title={
 							displayLatency < 0
 								? "No recent workspace connections have been made"
@@ -224,7 +222,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 							<GaugeIcon className="size-icon-xs" />
 							{displayLatency > 0 ? `${displayLatency?.toFixed(2)} ms` : "-"}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 				</div>
 			</div>
 
@@ -232,7 +230,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 				<div css={styles.category}>Active Connections</div>
 
 				<div css={styles.values}>
-					<Tooltip title="VS Code Editors with the Coder Remote Extension">
+					<MiniTooltip title="VS Code Editors with the Coder Remote Extension">
 						<div css={styles.value}>
 							<VSCodeIcon
 								css={css`
@@ -245,9 +243,9 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 								? "-"
 								: stats?.session_count.vscode}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 					<ValueSeparator />
-					<Tooltip title="JetBrains Editors">
+					<MiniTooltip title="JetBrains Editors">
 						<div css={styles.value}>
 							<JetBrainsIcon
 								css={css`
@@ -260,25 +258,25 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 								? "-"
 								: stats?.session_count.jetbrains}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 					<ValueSeparator />
-					<Tooltip title="SSH Sessions">
+					<MiniTooltip title="SSH Sessions">
 						<div css={styles.value}>
 							<TerminalIcon />
 							{typeof stats?.session_count.ssh === "undefined"
 								? "-"
 								: stats?.session_count.ssh}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 					<ValueSeparator />
-					<Tooltip title="Web Terminal Sessions">
+					<MiniTooltip title="Web Terminal Sessions">
 						<div css={styles.value}>
 							<AppWindowIcon className="size-icon-xs" />
 							{typeof stats?.session_count.reconnecting_pty === "undefined"
 								? "-"
 								: stats?.session_count.reconnecting_pty}
 						</div>
-					</Tooltip>
+					</MiniTooltip>
 				</div>
 			</div>
 
@@ -291,14 +289,14 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 					gap: 16,
 				}}
 			>
-				<Tooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
+				<MiniTooltip title="The last time stats were aggregated. Workspaces report statistics periodically, so it may take a bit for these to update!">
 					<div css={styles.value}>
 						<GitCompareArrowsIcon className="size-icon-xs" />
 						{lastAggregated}
 					</div>
-				</Tooltip>
+				</MiniTooltip>
 
-				<Tooltip title="A countdown until stats are fetched again. Click to refresh!">
+				<MiniTooltip title="A countdown until stats are fetched again. Click to refresh!">
 					<Button
 						css={[
 							styles.value,
@@ -328,7 +326,7 @@ export const DeploymentBannerView: FC<DeploymentBannerViewProps> = ({
 						<RotateCwIcon />
 						{timeUntilRefresh}s
 					</Button>
-				</Tooltip>
+				</MiniTooltip>
 			</div>
 		</div>
 	);
@@ -352,7 +350,7 @@ const WorkspaceBuildValue: FC<WorkspaceBuildValueProps> = ({
 	}
 
 	return (
-		<Tooltip title={`${statusText} Workspaces`}>
+		<MiniTooltip title={`${statusText} Workspaces`}>
 			<Link
 				component={RouterLink}
 				to={`/workspaces?filter=${encodeURIComponent(`status:${status}`)}`}
@@ -362,7 +360,7 @@ const WorkspaceBuildValue: FC<WorkspaceBuildValueProps> = ({
 					{typeof count === "undefined" ? "-" : count}
 				</div>
 			</Link>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 

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"

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} />
 					))}

site/src/modules/resources/AgentLogs/AgentLogs.tsx

@@ -1,7 +1,7 @@
-import MuiTooltip from "@mui/material/Tooltip";
 import type { WorkspaceAgentLogSource } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
 import type { Line } from "components/Logs/LogLine";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import {
 	Tooltip,
 	TooltipContent,
@@ -126,7 +126,7 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
 								maxLineNumber={logs.length}
 								style={style}
 								sourceIcon={
-									<MuiTooltip
+									<MiniTooltip
 										title={
 											<>
 												{logSource.display_name}
@@ -140,7 +140,7 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
 										}
 									>
 										{icon}
-									</MuiTooltip>
+									</MiniTooltip>
 								}
 							/>
 						);

site/src/modules/resources/AgentMetadata.tsx

@@ -1,5 +1,4 @@
 import Skeleton from "@mui/material/Skeleton";
-import Tooltip from "@mui/material/Tooltip";
 import { watchAgentMetadata } from "api/api";
 import type {
 	ServerSentEvent,
@@ -7,6 +6,7 @@ import type {
 	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(

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,

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>
 	);
 };
 

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>
 

site/src/modules/resources/SensitiveValue.tsx

@@ -1,7 +1,7 @@
 import { css, type Interpolation, type Theme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { EyeIcon, EyeOffIcon } from "lucide-react";
 import { type FC, useState } from "react";
 
@@ -35,7 +35,7 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
 			<CopyableValue value={value} css={styles.value}>
 				{displayValue}
 			</CopyableValue>
-			<Tooltip title={buttonLabel}>
+			<MiniTooltip title={buttonLabel}>
 				<IconButton
 					css={styles.button}
 					onClick={() => {
@@ -46,7 +46,7 @@ export const SensitiveValue: FC<SensitiveValueProps> = ({ value }) => {
 				>
 					{icon}
 				</IconButton>
-			</Tooltip>
+			</MiniTooltip>
 		</div>
 	);
 };
@@ -61,6 +61,6 @@ const styles = {
 	},
 
 	button: css`
-    color: inherit;
-  `,
+		color: inherit;
+	`,
 } satisfies Record<string, Interpolation<Theme>>;

site/src/modules/workspaces/WorkspaceBuildData/WorkspaceBuildData.tsx

@@ -1,8 +1,8 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Skeleton from "@mui/material/Skeleton";
-import Tooltip from "@mui/material/Tooltip";
 import type { WorkspaceBuild } from "api/typesGenerated";
 import { BuildIcon } from "components/BuildIcon/BuildIcon";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { InfoIcon } from "lucide-react";
 import { createDayString } from "utils/createDayString";
 import {
@@ -45,14 +45,14 @@ export const WorkspaceBuildData = ({ build }: { build: WorkspaceBuild }) => {
 					</span>
 					{!systemBuildReasons.includes(build.reason) &&
 						build.transition === "start" && (
-							<Tooltip title={buildReasonLabels[build.reason]}>
+							<MiniTooltip title={buildReasonLabels[build.reason]}>
 								<InfoIcon
 									css={(theme) => ({
 										color: theme.palette.info.light,
 									})}
 									className="size-icon-xs -mt-px"
 								/>
-							</Tooltip>
+							</MiniTooltip>
 						)}
 				</div>
 				<div

site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx

@@ -1,6 +1,6 @@
-import Tooltip from "@mui/material/Tooltip";
 import type { Workspace } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import type { FC } from "react";
 import {
 	DATE_FORMAT,
@@ -16,7 +16,7 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
 	workspace,
 }) => {
 	return workspace.deleting_at ? (
-		<Tooltip
+		<MiniTooltip
 			title={
 				<>
 					This workspace has not been used for{" "}
@@ -29,9 +29,9 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
 			<Badge role="status" variant="destructive" size="xs">
 				Deletion Pending
 			</Badge>
-		</Tooltip>
+		</MiniTooltip>
 	) : (
-		<Tooltip
+		<MiniTooltip
 			title={
 				<>
 					This workspace has not been used for{" "}
@@ -44,6 +44,6 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
 			<Badge role="status" variant="warning" size="xs">
 				Dormant
 			</Badge>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };

site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx

@@ -1,10 +1,10 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import Collapse from "@mui/material/Collapse";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import type { AuditLog, BuildReason } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
 import { DropdownArrow } from "components/DropdownArrow/DropdownArrow";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
@@ -128,7 +128,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 									{/* With multi-org, there is not enough space so show
                       everything in a tooltip. */}
 									{showOrgDetails ? (
-										<Tooltip
+										<MiniTooltip
 											title={
 												<div css={styles.auditLogInfoTooltip}>
 													{auditLog.ip && (
@@ -188,7 +188,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 													color: theme.palette.info.light,
 												})}
 											/>
-										</Tooltip>
+										</MiniTooltip>
 									) : (
 										<Stack direction="row" spacing={1} alignItems="baseline">
 											{auditLog.ip && (

site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx

@@ -1,8 +1,8 @@
 import type { CSSObject, Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import type { ConnectionLog } from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
@@ -87,7 +87,7 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
 										label={isWeb ? "HTTP Status Code" : "SSH Exit Code"}
 									/>
 								)}
-								<Tooltip
+								<MiniTooltip
 									title={
 										<div css={styles.connectionLogInfoTooltip}>
 											{connectionLog.ip && (
@@ -140,7 +140,7 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
 											color: theme.palette.info.light,
 										})}
 									/>
-								</Tooltip>
+								</MiniTooltip>
 							</Stack>
 						</Stack>
 					</Stack>

site/src/pages/DeploymentSettingsPage/LicensesSettingsPage/LicensesSettingsPageView.tsx

@@ -1,10 +1,10 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import MuiLink from "@mui/material/Link";
 import Skeleton from "@mui/material/Skeleton";
-import Tooltip from "@mui/material/Tooltip";
 import type { GetLicensesResponse } from "api/api";
 import type { Feature, UserStatusChangeCount } from "api/typesGenerated";
 import { Button } from "components/Button/Button";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import {
 	SettingsHeader,
 	SettingsHeaderDescription,
@@ -80,7 +80,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 							Add a license
 						</Link>
 					</Button>
-					<Tooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
+					<MiniTooltip title="Refresh license entitlements. This is done automatically every 10 minutes.">
 						<Button
 							disabled={isRefreshing}
 							onClick={refreshEntitlements}
@@ -91,7 +91,7 @@ const LicensesSettingsPageView: FC<Props> = ({
 							</Spinner>
 							Refresh
 						</Button>
-					</Tooltip>
+					</MiniTooltip>
 				</Stack>
 			</Stack>
 

site/src/pages/DeploymentSettingsPage/NotificationsPage/NotificationEvents.tsx

@@ -6,7 +6,6 @@ import ListItem from "@mui/material/ListItem";
 import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
 import ToggleButton from "@mui/material/ToggleButton";
 import ToggleButtonGroup from "@mui/material/ToggleButtonGroup";
-import Tooltip from "@mui/material/Tooltip";
 import { getErrorMessage } from "api/errors";
 import {
 	type selectTemplatesByGroup,
@@ -16,6 +15,7 @@ import type { DeploymentValues } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { Button } from "components/Button/Button";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import {
 	castNotificationMethod,
@@ -186,7 +186,7 @@ const MethodToggleGroup: FC<MethodToggleGroupProps> = ({
 				const Icon = methodIcons[method];
 				const label = methodLabels[method];
 				return (
-					<Tooltip key={method} title={label}>
+					<MiniTooltip key={method} title={label}>
 						<ToggleButton
 							value={method}
 							css={styles.toggleButton}
@@ -202,7 +202,7 @@ const MethodToggleGroup: FC<MethodToggleGroupProps> = ({
 						>
 							<Icon aria-label={label} />
 						</ToggleButton>
-					</Tooltip>
+					</MiniTooltip>
 				);
 			})}
 		</ToggleButtonGroup>

site/src/pages/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,11 +1,11 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import type { ApiErrorResponse } from "api/errors";
 import type { ExternalAuth, ExternalAuthDevice } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
 import { Avatar } from "components/Avatar/Avatar";
 import { GitDeviceAuth } from "components/GitDeviceAuth/GitDeviceAuth";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { SignInLayout } from "components/SignInLayout/SignInLayout";
 import { Welcome } from "components/Welcome/Welcome";
 import { ExternalLinkIcon, RotateCwIcon } from "lucide-react";
@@ -82,7 +82,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 							return;
 						}
 						return (
-							<Tooltip key={install.id} title={install.account.login}>
+							<MiniTooltip key={install.id} title={install.account.login}>
 								<Link
 									href={install.account.profile_url}
 									target="_blank"
@@ -93,7 +93,7 @@ const ExternalAuthPageView: FC<ExternalAuthPageViewProps> = ({
 										fallback={install.account.login}
 									/>
 								</Link>
-							</Tooltip>
+							</MiniTooltip>
 						);
 					})}
 					&nbsp;

site/src/pages/HealthPage/DERPRegionPage.tsx

@@ -1,5 +1,4 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
 import type {
 	DERPNodeReport,
 	DERPRegionReport,
@@ -7,6 +6,7 @@ import type {
 	HealthSeverity,
 } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { ChevronLeftIcon, CodeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link, useOutletContext, useParams } from "react-router";
@@ -85,16 +85,16 @@ const DERPRegionPage: FC = () => {
 
 				<section>
 					<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
-						<Tooltip title="Region ID">
+						<MiniTooltip title="Region ID">
 							<Pill icon={<HashIcon className="size-icon-sm" />}>
 								{region!.RegionID}
 							</Pill>
-						</Tooltip>
-						<Tooltip title="Region Code">
+						</MiniTooltip>
+						<MiniTooltip title="Region Code">
 							<Pill icon={<CodeIcon className="size-icon-sm" />}>
 								{region!.RegionCode}
 							</Pill>
-						</Tooltip>
+						</MiniTooltip>
 						<BooleanPill value={region!.EmbeddedRelay}>
 							Embedded Relay
 						</BooleanPill>
@@ -127,14 +127,14 @@ const DERPRegionPage: FC = () => {
 								</div>
 
 								<div css={reportStyles.pills}>
-									<Tooltip title="Round trip ping">
+									<MiniTooltip title="Round trip ping">
 										<Pill
 											css={{ color: latencyColor }}
 											icon={<StatusCircle color={latencyColor} />}
 										>
 											{report.round_trip_ping_ms}ms
 										</Pill>
-									</Tooltip>
+									</MiniTooltip>
 									<BooleanPill value={report.can_exchange_messages}>
 										Exchange Messages
 									</BooleanPill>

site/src/pages/HealthPage/HealthLayout.tsx

@@ -1,10 +1,10 @@
 import CircularProgress from "@mui/material/CircularProgress";
 import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { health, refreshHealth } from "api/queries/debug";
 import type { HealthSeverity } from "api/typesGenerated";
 import { ErrorAlert } from "components/Alert/ErrorAlert";
 import { Loader } from "components/Loader/Loader";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import kebabCase from "lodash/fp/kebabCase";
 import { BellOffIcon, RotateCcwIcon } from "lucide-react";
 import { DashboardFullPage } from "modules/dashboard/DashboardLayout";
@@ -76,7 +76,7 @@ export const HealthLayout: FC = () => {
 								<div className="flex items-center justify-between">
 									<HealthIcon size={32} severity={healthStatus.severity} />
 
-									<Tooltip title="Refresh health checks">
+									<MiniTooltip title="Refresh health checks">
 										<IconButton
 											size="small"
 											disabled={isRefreshing}
@@ -91,7 +91,7 @@ export const HealthLayout: FC = () => {
 												<RotateCcwIcon className="size-5" />
 											)}
 										</IconButton>
-									</Tooltip>
+									</MiniTooltip>
 								</div>
 								<div className="font-medium mt-4">
 									{healthStatus.healthy ? "Healthy" : "Unhealthy"}

site/src/pages/HealthPage/WebsocketPage.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { CodeIcon } from "lucide-react";
 import { useOutletContext } from "react-router";
 import { MONOSPACE_FONT_FAMILY } from "theme/constants";
@@ -45,11 +45,11 @@ const WebsocketPage = () => {
 				})}
 
 				<section>
-					<Tooltip title="Code">
+					<MiniTooltip title="Code">
 						<Pill icon={<CodeIcon className="size-icon-sm" />}>
 							{websocket.code}
 						</Pill>
-					</Tooltip>
+					</MiniTooltip>
 				</section>
 
 				<section>

site/src/pages/HealthPage/WorkspaceProxyPage.tsx

@@ -1,7 +1,7 @@
 import { useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
 import type { HealthcheckReport } from "api/typesGenerated";
 import { Alert } from "components/Alert/Alert";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { GlobeIcon, HashIcon } from "lucide-react";
 import type { FC } from "react";
 import { useOutletContext } from "react-router";
@@ -106,18 +106,18 @@ const WorkspaceProxyPage: FC = () => {
 
 								<div css={{ display: "flex", flexWrap: "wrap", gap: 12 }}>
 									{region.wildcard_hostname && (
-										<Tooltip title="Wildcard Hostname">
+										<MiniTooltip title="Wildcard Hostname">
 											<Pill icon={<GlobeIcon />}>
 												{region.wildcard_hostname}
 											</Pill>
-										</Tooltip>
+										</MiniTooltip>
 									)}
 									{region.version && (
-										<Tooltip title="Version">
+										<MiniTooltip title="Version">
 											<Pill icon={<HashIcon className="size-icon-sm" />}>
 												{region.version}
 											</Pill>
-										</Tooltip>
+										</MiniTooltip>
 									)}
 									{region.derp_enabled && (
 										<BooleanPill value={region.derp_enabled}>

site/src/pages/IconsPage/IconsPage.tsx

@@ -3,10 +3,10 @@ import IconButton from "@mui/material/IconButton";
 import InputAdornment from "@mui/material/InputAdornment";
 import Link from "@mui/material/Link";
 import TextField from "@mui/material/TextField";
-import Tooltip from "@mui/material/Tooltip";
 import { CopyableValue } from "components/CopyableValue/CopyableValue";
 import { EmptyState } from "components/EmptyState/EmptyState";
 import { Margins } from "components/Margins/Margins";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import {
 	PageHeader,
 	PageHeaderSubtitle,
@@ -76,27 +76,14 @@ const IconsPage: FC = () => {
 			<Margins>
 				<PageHeader
 					actions={
-						<Tooltip
-							placement="bottom-end"
-							title={
-								<p
-									css={{
-										padding: 8,
-										fontSize: 13,
-										lineHeight: 1.5,
-									}}
-								>
-									You can suggest a new icon by submitting a Pull Request to our
-									public GitHub repository. Just keep in mind that it should be
-									relevant to many Coder users, and redistributable under a
-									permissive license.
-								</p>
-							}
+						<MiniTooltip
+							align="end"
+							title="You can suggest a new icon by submitting a Pull Request to our public GitHub repository. Just keep in mind that it should be relevant to many Coder users, and redistributable under a permissive license."
 						>
 							<Link href="https://github.com/coder/coder/tree/main/site/static/icon">
 								Suggest an icon
 							</Link>
-						</Tooltip>
+						</MiniTooltip>
 					}
 				>
 					<PageHeaderTitle>Icons</PageHeaderTitle>
@@ -134,14 +121,14 @@ const IconsPage: FC = () => {
 						),
 						endAdornment: searchInputText && (
 							<InputAdornment position="end">
-								<Tooltip title="Clear filter">
+								<MiniTooltip title="Clear filter">
 									<IconButton
 										size="small"
 										onClick={() => setSearchInputText("")}
 									>
 										<XIcon className="size-icon-xs" />
 									</IconButton>
-								</Tooltip>
+								</MiniTooltip>
 							</InputAdornment>
 						),
 					}}
@@ -158,7 +145,7 @@ const IconsPage: FC = () => {
 						<EmptyState message="No results matched your search" />
 					)}
 					{searchedIcons.map((icon) => (
-						<CopyableValue key={icon.url} value={icon.url} placement="bottom">
+						<CopyableValue key={icon.url} value={icon.url} align="center">
 							<Stack alignItems="center" css={{ margin: 12 }}>
 								<img
 									alt={icon.url}

site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx

@@ -1,6 +1,7 @@
 import {
 	MockOrganizationMember,
 	MockOrganizationMember2,
+	MockOrganizationMember3,
 	MockUserOwner,
 } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -21,6 +22,7 @@ const meta: Meta<typeof OrganizationMembersPageView> = {
 		members: [
 			{ ...MockOrganizationMember, groups: [] },
 			{ ...MockOrganizationMember2, groups: [] },
+			{ ...MockOrganizationMember3, groups: [] },
 		],
 		membersQuery: {
 			...mockSuccessResult,

site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx

@@ -1,7 +1,6 @@
 import { useTheme } from "@emotion/react";
 import LinearProgress from "@mui/material/LinearProgress";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import { entitlements } from "api/queries/entitlements";
 import {
 	insightsTemplate,
@@ -32,6 +31,7 @@ import {
 	HelpTooltipTitle,
 } from "components/HelpTooltip/HelpTooltip";
 import { Loader } from "components/Loader/Loader";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import { useEmbeddedMetadata } from "hooks/useEmbeddedMetadata";
 import {
@@ -495,9 +495,9 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 											{usage.display_name}
 										</div>
 									</div>
-									<Tooltip
+									<MiniTooltip
 										title={`${Math.floor(percentage)}%`}
-										placement="top"
+										side="top"
 										arrow
 									>
 										<LinearProgress
@@ -513,7 +513,7 @@ const TemplateUsagePanel: FC<TemplateUsagePanelProps> = ({
 												},
 											}}
 										/>
-									</Tooltip>
+									</MiniTooltip>
 									<Stack
 										spacing={0}
 										css={{
@@ -612,12 +612,12 @@ const TemplateParametersUsagePanel: FC<TemplateParametersUsagePanelProps> = ({
 										}}
 									>
 										<div>Value</div>
-										<Tooltip
+										<MiniTooltip
 											title="The number of workspaces using this value"
-											placement="top"
+											side="top"
 										>
 											<div>Count</div>
-										</Tooltip>
+										</MiniTooltip>
 									</ParameterUsageRow>
 									{[...parameter.values]
 										.sort((a, b) => b.count - a.count)

site/src/pages/TemplateVersionEditorPage/TemplateVersionEditor.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
 import { getErrorDetail, getErrorMessage } from "api/errors";
 import type {
 	ProvisionerJobLog,
@@ -23,6 +22,7 @@ import {
 } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import {
 	ChevronLeftIcon,
 	ExternalLinkIcon,
@@ -217,11 +217,11 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 					data-testid="topbar"
 				>
 					<div>
-						<Tooltip title="Back to the template">
+						<MiniTooltip title="Back to the template">
 							<TopbarIconButton component={RouterLink} to={templateLink}>
 								<ChevronLeftIcon className="size-icon-sm" />
 							</TopbarIconButton>
-						</Tooltip>
+						</MiniTooltip>
 					</div>
 
 					<TopbarData>
@@ -367,7 +367,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									},
 								}}
 							>
-								<Tooltip title="Create File" placement="top">
+								<MiniTooltip title="Create File" side="top">
 									<IconButton
 										aria-label="Create File"
 										onClick={(event) => {
@@ -377,7 +377,7 @@ export const TemplateVersionEditor: FC<TemplateVersionEditorProps> = ({
 									>
 										<PlusIcon className="size-icon-xs" />
 									</IconButton>
-								</Tooltip>
+								</MiniTooltip>
 							</div>
 							<CreateFileDialog
 								fileTree={fileTree}

site/src/pages/UserSettingsPage/ExternalAuthPage/ExternalAuthPageView.tsx

@@ -1,5 +1,4 @@
 import { useTheme } from "@emotion/react";
-import Tooltip from "@mui/material/Tooltip";
 import { externalAuthProvider } from "api/queries/externalAuth";
 import type {
 	ExternalAuthLink,
@@ -16,6 +15,7 @@ import {
 	DropdownMenuTrigger,
 } from "components/DropdownMenu/DropdownMenu";
 import { Loader } from "components/Loader/Loader";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Spinner } from "components/Spinner/Spinner";
 import { Stack } from "components/Stack/Stack";
 import {
@@ -136,12 +136,12 @@ const ExternalAuthRow: FC<ExternalAuthRowProps> = ({
 					 * attempt to authenticate when the token expires.
 					 */}
 					{link?.has_refresh_token && authenticated && (
-						<Tooltip
+						<MiniTooltip
 							title="Authentication token will automatically refresh when expired."
-							placement="right"
+							side="right"
 						>
 							<RefreshCcwIcon className="size-3" />
-						</Tooltip>
+						</MiniTooltip>
 					)}
 
 					{link?.validate_error && (

site/src/pages/UserSettingsPage/NotificationsPage/NotificationsPage.tsx

@@ -6,7 +6,6 @@ import ListItem from "@mui/material/ListItem";
 import ListItemIcon from "@mui/material/ListItemIcon";
 import ListItemText, { listItemTextClasses } from "@mui/material/ListItemText";
 import Switch from "@mui/material/Switch";
-import Tooltip from "@mui/material/Tooltip";
 import {
 	customNotificationTemplates,
 	disableNotification,
@@ -22,6 +21,7 @@ import type {
 } from "api/typesGenerated";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
 import { Loader } from "components/Loader/Loader";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { Stack } from "components/Stack/Stack";
 import { useAuthenticated } from "hooks";
 import {
@@ -199,9 +199,9 @@ const NotificationsPage: FC = () => {
 															css={styles.listItemEndIcon}
 															aria-label="Delivery method"
 														>
-															<Tooltip title={`Delivery via ${label}`}>
+															<MiniTooltip title={`Delivery via ${label}`}>
 																<Icon aria-label={label} />
-															</Tooltip>
+															</MiniTooltip>
 														</ListItemIcon>
 													</ListItem>
 													{!isLastItem && <Divider />}

site/src/pages/WorkspacePage/WorkspaceActions/Buttons.tsx

@@ -1,6 +1,6 @@
-import Tooltip from "@mui/material/Tooltip";
 import type { Workspace, WorkspaceBuildParameter } from "api/typesGenerated";
 import { TopbarButton } from "components/FullPageLayout/Topbar";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import {
 	BanIcon,
 	CircleStopIcon,
@@ -30,7 +30,7 @@ export const UpdateButton: FC<ActionButtonProps> = ({
 	requireActiveVersion,
 }) => {
 	return (
-		<Tooltip
+		<MiniTooltip
 			title={
 				requireActiveVersion
 					? "This template requires automatic updates on workspace startup. Contact your administrator if you want to preserve the template version."
@@ -53,7 +53,7 @@ export const UpdateButton: FC<ActionButtonProps> = ({
 					<>Update and start&hellip;</>
 				)}
 			</TopbarButton>
-		</Tooltip>
+		</MiniTooltip>
 	);
 };
 
@@ -88,7 +88,7 @@ export const StartButton: FC<ActionButtonPropsWithWorkspace> = ({
 	);
 
 	if (tooltipText) {
-		mainButton = <Tooltip title={tooltipText}>{mainButton}</Tooltip>;
+		mainButton = <MiniTooltip title={tooltipText}>{mainButton}</MiniTooltip>;
 	}
 
 	return (

site/src/pages/WorkspacePage/WorkspaceScheduleControls.tsx

@@ -1,7 +1,6 @@
 import type { Interpolation, Theme } from "@emotion/react";
 import IconButton from "@mui/material/IconButton";
 import Link, { type LinkProps } from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import { visuallyHidden } from "@mui/utils";
 import { getErrorMessage } from "api/errors";
 import {
@@ -11,6 +10,7 @@ import {
 import type { Template, Workspace } from "api/typesGenerated";
 import { TopbarData, TopbarIcon } from "components/FullPageLayout/Topbar";
 import { displayError, displaySuccess } from "components/GlobalSnackbar/utils";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import dayjs, { type Dayjs } from "dayjs";
 import { useTime } from "hooks/useTime";
 import { ClockIcon, MinusIcon, PlusIcon } from "lucide-react";
@@ -45,7 +45,7 @@ const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
 
 	return (
 		<TopbarData>
-			<Tooltip title="Schedule">
+			<MiniTooltip title="Schedule">
 				{onClickIcon ? (
 					<button
 						type="button"
@@ -58,7 +58,7 @@ const WorkspaceScheduleContainer: FC<WorkspaceScheduleContainerProps> = ({
 				) : (
 					icon
 				)}
-			</Tooltip>
+			</MiniTooltip>
 			{children}
 		</TopbarData>
 	);
@@ -200,7 +200,7 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 
 	const controls = canUpdateSchedule && canEditDeadline(workspace) && (
 		<div css={styles.scheduleControls}>
-			<Tooltip title="Subtract 1 hour from deadline">
+			<MiniTooltip title="Subtract 1 hour from deadline">
 				<IconButton
 					disabled={!deadlineMinusEnabled}
 					size="small"
@@ -212,8 +212,8 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 					<MinusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Subtract 1 hour</span>
 				</IconButton>
-			</Tooltip>
-			<Tooltip title="Add 1 hour to deadline">
+			</MiniTooltip>
+			<MiniTooltip title="Add 1 hour to deadline">
 				<IconButton
 					disabled={!deadlinePlusEnabled}
 					size="small"
@@ -225,14 +225,14 @@ const AutostopDisplay: FC<AutostopDisplayProps> = ({
 					<PlusIcon className="size-icon-xs" />
 					<span style={visuallyHidden}>Add 1 hour</span>
 				</IconButton>
-			</Tooltip>
+			</MiniTooltip>
 		</div>
 	);
 
 	if (tooltip) {
 		return (
 			<WorkspaceScheduleContainer onClickIcon={onClickScheduleIcon}>
-				<Tooltip title={tooltip}>{display}</Tooltip>
+				<MiniTooltip title={tooltip}>{display}</MiniTooltip>
 				{controls}
 			</WorkspaceScheduleContainer>
 		);

site/src/pages/WorkspacePage/WorkspaceTopbar.tsx

@@ -1,6 +1,5 @@
 import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import Link from "@mui/material/Link";
-import Tooltip from "@mui/material/Tooltip";
 import { workspaceQuota } from "api/queries/workspaceQuota";
 import type * as TypesGen from "api/typesGenerated";
 import { Avatar } from "components/Avatar/Avatar";
@@ -19,6 +18,7 @@ import {
 	HelpTooltipContent,
 	HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
+import MiniTooltip from "components/MiniTooltip/MiniTooltip";
 import { ChevronLeftIcon, CircleDollarSign, TrashIcon } from "lucide-react";
 import { useDashboard } from "modules/dashboard/useDashboard";
 import { linkToTemplate, useLinks } from "modules/navigation";
@@ -108,11 +108,11 @@ export const WorkspaceTopbar: FC<WorkspaceProps> = ({
 
 	return (
 		<Topbar css={{ gridArea: "topbar" }}>
-			<Tooltip title="Back to workspaces">
+			<MiniTooltip title="Back to workspaces">
 				<TopbarIconButton component={RouterLink} to="/workspaces">
 					<ChevronLeftIcon className="size-icon-sm" />
 				</TopbarIconButton>
-			</Tooltip>
+			</MiniTooltip>
 
 			<div css={styles.topbarLeft}>
 				<TopbarData>

site/src/testHelpers/entities.ts

@@ -577,6 +577,19 @@ export const MockOrganizationMember2: TypesGen.OrganizationMemberWithUserData =
 		roles: [],
 	};
 
+export const MockOrganizationMember3: TypesGen.OrganizationMemberWithUserData =
+	{
+		organization_id: MockOrganization.id,
+		user_id: SuspendedMockUser.id,
+		username: SuspendedMockUser.username,
+		email: SuspendedMockUser.email,
+		updated_at: "2025-10-15T00:11:42.783Z",
+		created_at: "2025-10-15T00:11:42.783Z",
+		name: SuspendedMockUser.name,
+		global_roles: MockUserOwner.roles,
+		roles: [MockTemplateAdminRole],
+	};
+
 export const MockProvisionerKey: TypesGen.ProvisionerKey = {
 	id: "test-provisioner-key",
 	organization: MockOrganization.id,
@@ -1033,7 +1046,7 @@ export const MockWorkspaceAppStatus: TypesGen.WorkspaceAppStatus = {
 	icon: "",
 };
 
-const MockWorkspaceAgentDisconnected: TypesGen.WorkspaceAgent = {
+export const MockWorkspaceAgentDisconnected: TypesGen.WorkspaceAgent = {
 	...MockWorkspaceAgent,
 	id: "test-workspace-agent-2",
 	name: "another-workspace-agent",