coder · aqandrew · Nov 25, 2025 · Nov 26, 2025 · Nov 26, 2025 · Nov 26, 2025
diff --git a/biome.jsonc b/biome.jsonc
@@ -99,7 +99,7 @@
 							// "@mui/material/TextField": "Use shadcn/ui Input component instead.",
 							// "@mui/material/ToggleButton": "Use shadcn/ui Toggle or custom component instead.",
 							// "@mui/material/ToggleButtonGroup": "Use shadcn/ui Toggle or custom component instead.",
-							// "@mui/material/Tooltip": "Use shadcn/ui Tooltip component instead.",
+							"@mui/material/Tooltip": "Use components/Tooltip/Tooltip instead.",
 							"@mui/material/Typography": "Use native HTML elements instead. Eg: <span>, <p>, <h1>, etc.",
 							// "@mui/material/useMediaQuery": "Use Tailwind responsive classes or custom hook instead.",
 							// "@mui/system": "Use Tailwind CSS instead.",

diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -5,13 +5,17 @@ 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 { Pill } from "components/Pill/Pill";
 import { Stack } from "components/Stack/Stack";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { CircleAlertIcon, SettingsIcon } from "lucide-react";
 import { type FC, type ReactNode, useState } from "react";
 import type {
@@ -136,25 +140,41 @@ 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.">
-					<span css={styles.optionalLabel}>(optional)</span>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<span css={styles.optionalLabel}>(optional)</span>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" className="max-w-xs">
+						If no value is specified, the system will default to the value set
+						by the administrator.
+					</TooltipContent>
 				</Tooltip>
 			)}
 			{!parameter.mutable && (
-				<Tooltip title="This value cannot be modified after the workspace has been created.">
-					<Pill
-						type="warning"
-						icon={<CircleAlertIcon className="size-icon-xs" />}
-					>
-						Immutable
-					</Pill>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Pill
+							type="warning"
+							icon={<CircleAlertIcon className="size-icon-xs" />}
+						>
+							Immutable
+						</Pill>
+					</TooltipTrigger>
+					<TooltipContent side="bottom" className="max-w-xs">
+						This value cannot be modified after the workspace has been created.
+					</TooltipContent>
 				</Tooltip>
 			)}
 			{isPreset && (
-				<Tooltip title="This value was set by a preset">
-					<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
-						Preset
-					</Pill>
+				<Tooltip>
+					<TooltipTrigger asChild>
+						<Pill type="info" icon={<SettingsIcon className="size-icon-xs" />}>
+							Preset
+						</Pill>
+					</TooltipTrigger>
+					<TooltipContent side="bottom">
+						This value was set by a preset
+					</TooltipContent>
 				</Tooltip>
 			)}
 		</span>
@@ -328,14 +348,15 @@ const RichParameterField: FC<RichParameterInputProps> = ({
 										css={{ padding: small ? undefined : "4px 0" }}
 									>
 										{small ? (
-											<Tooltip
-												title={
+											<Tooltip>
+												<TooltipTrigger asChild>
+													<div>{option.name}</div>
+												</TooltipTrigger>
+												<TooltipContent side="bottom" className="max-w-xs">
 													<MemoizedMarkdown>
 														{option.description}
 													</MemoizedMarkdown>
-												}
-											>
-												<div>{option.name}</div>
+												</TooltipContent>
 											</Tooltip>
 										) : (
 											<>

diff --git a/site/src/modules/resources/AgentLogs/AgentLogs.tsx b/site/src/modules/resources/AgentLogs/AgentLogs.tsx
@@ -1,4 +1,3 @@
-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";
@@ -125,21 +124,18 @@ export const AgentLogs = forwardRef<List, AgentLogsProps>(
 								maxLineNumber={logs.length}
 								style={style}
 								sourceIcon={
-									<MuiTooltip
-										title={
-											<>
-												{logSource.display_name}
-												{assignedIcon && (
-													<i>
-														<br />
-														No icon specified!
-													</i>
-												)}
-											</>
-										}
-									>
-										{icon}
-									</MuiTooltip>
+									<Tooltip>
+										<TooltipTrigger asChild>{icon}</TooltipTrigger>
+										<TooltipContent side="bottom">
+											{logSource.display_name}
+											{assignedIcon && (
+												<i>
+													<br />
+													No icon specified!
+												</i>
+											)}
+										</TooltipContent>
+									</Tooltip>
 								}
 							/>
 						);

diff --git a/site/src/modules/resources/AppLink/AppLink.tsx b/site/src/modules/resources/AppLink/AppLink.tsx
@@ -155,7 +155,7 @@ export const AppLink: FC<AppLinkProps> = ({
 		return (
 			<Tooltip>
 				<TooltipTrigger asChild>{button}</TooltipTrigger>
-				<TooltipContent>
+				<TooltipContent className="max-w-xs">
 					{primaryTooltip ? (
 						primaryTooltip
 					) : app.tooltip ? (

diff --git a/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx b/site/src/modules/workspaces/WorkspaceDormantBadge/WorkspaceDormantBadge.tsx
@@ -1,6 +1,10 @@
-import Tooltip from "@mui/material/Tooltip";
 import type { Workspace } from "api/typesGenerated";
 import { Badge } from "components/Badge/Badge";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import type { FC } from "react";
 import {
 	DATE_FORMAT,
@@ -16,34 +20,32 @@ export const WorkspaceDormantBadge: FC<WorkspaceDormantBadgeProps> = ({
 	workspace,
 }) => {
 	return workspace.deleting_at ? (
-		<Tooltip
-			title={
-				<>
-					This workspace has not been used for{" "}
-					{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
-					marked dormant. It is scheduled to be deleted on{" "}
-					{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
-				</>
-			}
-		>
-			<Badge role="status" variant="destructive" size="xs">
-				Deletion Pending
-			</Badge>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Badge role="status" variant="destructive" size="xs">
+					Deletion Pending
+				</Badge>
+			</TooltipTrigger>
+			<TooltipContent side="bottom" className="max-w-xs">
+				This workspace has not been used for{" "}
+				{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
+				dormant. It is scheduled to be deleted on{" "}
+				{formatDateTime(workspace.deleting_at, DATE_FORMAT.FULL_DATETIME)}.
+			</TooltipContent>
 		</Tooltip>
 	) : (
-		<Tooltip
-			title={
-				<>
-					This workspace has not been used for{" "}
-					{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been
-					marked dormant. It is not scheduled for auto-deletion but will become
-					a candidate if auto-deletion is enabled on this template.
-				</>
-			}
-		>
-			<Badge role="status" variant="warning" size="xs">
-				Dormant
-			</Badge>
+		<Tooltip>
+			<TooltipTrigger asChild>
+				<Badge role="status" variant="warning" size="xs">
+					Dormant
+				</Badge>
+			</TooltipTrigger>
+			<TooltipContent side="bottom" className="max-w-xs">
+				This workspace has not been used for{" "}
+				{relativeTimeWithoutSuffix(workspace.last_used_at)} and has been marked
+				dormant. It is not scheduled for auto-deletion but will become a
+				candidate if auto-deletion is enabled on this template.
+			</TooltipContent>
 		</Tooltip>
 	);
 };
diff --git a/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx b/site/src/pages/AuditPage/AuditLogRow/AuditLogRow.tsx
@@ -1,14 +1,18 @@
 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 { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { InfoIcon, NetworkIcon } from "lucide-react";
 import { type FC, useState } from "react";
 import { Link as RouterLink } from "react-router";
@@ -128,8 +132,15 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 									{/* With multi-org, there is not enough space so show
                       everything in a tooltip. */}
 									{showOrgDetails ? (
-										<Tooltip
-											title={
+										<Tooltip>
+											<TooltipTrigger asChild>
+												<InfoIcon
+													css={(theme) => ({
+														color: theme.palette.info.light,
+													})}
+												/>
+											</TooltipTrigger>
+											<TooltipContent side="bottom">
 												<div css={styles.auditLogInfoTooltip}>
 													{auditLog.ip && (
 														<div>
@@ -181,13 +192,7 @@ export const AuditLogRow: FC<AuditLogRowProps> = ({
 															</div>
 														)}
 												</div>
-											}
-										>
-											<InfoIcon
-												css={(theme) => ({
-													color: theme.palette.info.light,
-												})}
-											/>
+											</TooltipContent>
 										</Tooltip>
 									) : (
 										<Stack direction="row" spacing={1} alignItems="baseline">

diff --git a/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx b/site/src/pages/ConnectionLogPage/ConnectionLogRow/ConnectionLogRow.tsx
@@ -1,12 +1,16 @@
 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 { Stack } from "components/Stack/Stack";
 import { StatusPill } from "components/StatusPill/StatusPill";
 import { TableCell } from "components/Table/Table";
 import { TimelineEntry } from "components/Timeline/TimelineEntry";
+import {
+	Tooltip,
+	TooltipContent,
+	TooltipTrigger,
+} from "components/Tooltip/Tooltip";
 import { InfoIcon, NetworkIcon } from "lucide-react";
 import type { FC } from "react";
 import { Link as RouterLink } from "react-router";
@@ -87,8 +91,15 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
 										label={isWeb ? "HTTP Status Code" : "SSH Exit Code"}
 									/>
 								)}
-								<Tooltip
-									title={
+								<Tooltip>
+									<TooltipTrigger asChild>
+										<InfoIcon
+											css={(theme) => ({
+												color: theme.palette.info.light,
+											})}
+										/>
+									</TooltipTrigger>
+									<TooltipContent side="bottom">
 										<div css={styles.connectionLogInfoTooltip}>
 											{connectionLog.ip && (
 												<div>
@@ -133,13 +144,7 @@ export const ConnectionLogRow: FC<ConnectionLogRowProps> = ({
 												</div>
 											)}
 										</div>
-									}
-								>
-									<InfoIcon
-										css={(theme) => ({
-											color: theme.palette.info.light,
-										})}
-									/>
+									</TooltipContent>
 								</Tooltip>
 							</Stack>
 						</Stack>

diff --git a/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx b/site/src/pages/OrganizationSettingsPage/OrganizationMembersPageView.stories.tsx
@@ -1,6 +1,8 @@
 import {
 	MockOrganizationMember,
 	MockOrganizationMember2,
+	MockOwnerRole,
+	MockUserAdminRole,
 	MockUserOwner,
 } from "testHelpers/entities";
 import type { Meta, StoryObj } from "@storybook/react-vite";
@@ -19,7 +21,11 @@ const meta: Meta<typeof OrganizationMembersPageView> = {
 		canViewMembers: true,
 		me: MockUserOwner,
 		members: [
-			{ ...MockOrganizationMember, groups: [] },
+			{
+				...MockOrganizationMember,
+				global_roles: [MockOwnerRole, MockUserAdminRole],
+				groups: [],
+			},
 			{ ...MockOrganizationMember2, groups: [] },
 		],
 		membersQuery: {