From ce7394ca5d819b4f2c28ee73e39bfe8ef7ce5207 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Fri, 15 Dec 2023 19:13:14 +0000
Subject: [PATCH 01/10] Refactor help tooltip

---
 .../ActiveUserChart/ActiveUserChart.tsx       |  17 +-
 .../components/HelpTooltip/HelpTooltip.tsx    | 190 ++++++------------
 .../components/InfoTooltip/InfoTooltip.tsx    |  22 +-
 .../src/components/Resources/AgentLatency.tsx |  42 ++--
 .../Resources/AgentOutdatedTooltip.tsx        |  37 ++--
 site/src/components/Resources/AgentStatus.tsx | 151 ++++----------
 .../src/components/Resources/AgentVersion.tsx |  34 +---
 .../WorkspaceOutdatedTooltip.tsx              |  42 ++--
 site/src/pages/AuditPage/AuditHelpTooltip.tsx |  20 +-
 .../TemplateInsightsPage.tsx                  |  31 ++-
 .../pages/TemplatesPage/TemplatesPageView.tsx |  19 +-
 .../UsersPage/UsersTable/EditRolesButton.tsx  |  15 +-
 .../UsersTable/TableColumnHelpTooltip.tsx     |  26 ++-
 .../WorkspacesPage/WorkspaceHelpTooltip.tsx   |  25 ++-
 14 files changed, 274 insertions(+), 397 deletions(-)

diff --git a/site/src/components/ActiveUserChart/ActiveUserChart.tsx b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
index 8541297819b99..3a4ca5d163c9c 100644
--- a/site/src/components/ActiveUserChart/ActiveUserChart.tsx
+++ b/site/src/components/ActiveUserChart/ActiveUserChart.tsx
@@ -17,6 +17,8 @@ import {
   HelpTooltip,
   HelpTooltipTitle,
   HelpTooltipText,
+  HelpTooltipContent,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import dayjs from "dayjs";
 import { useTheme } from "@emotion/react";
@@ -139,12 +141,15 @@ export const ActiveUsersTitle: FC = () => {
   return (
     <div css={{ display: "flex", alignItems: "center", gap: 8 }}>
       Active Users
-      <HelpTooltip size="small">
-        <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
-        <HelpTooltipText>
-          When a connection is initiated to a user&apos;s workspace they are
-          considered an active user. e.g. apps, web terminal, SSH
-        </HelpTooltipText>
+      <HelpTooltip>
+        <HelpTooltipTrigger size="small" />
+        <HelpTooltipContent>
+          <HelpTooltipTitle>How do we calculate active users?</HelpTooltipTitle>
+          <HelpTooltipText>
+            When a connection is initiated to a user&apos;s workspace they are
+            considered an active user. e.g. apps, web terminal, SSH
+          </HelpTooltipText>
+        </HelpTooltipContent>
       </HelpTooltip>
     </div>
   );
diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index e5d06d67b6490..05e7fcd87dee1 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -1,114 +1,78 @@
 import Link from "@mui/material/Link";
-// This is used as base for the main HelpTooltip component
-// eslint-disable-next-line no-restricted-imports -- Read above
-import Popover, { type PopoverProps } from "@mui/material/Popover";
 import HelpIcon from "@mui/icons-material/HelpOutline";
 import OpenInNewIcon from "@mui/icons-material/OpenInNew";
 import {
-  createContext,
-  useContext,
-  useRef,
-  useState,
   type FC,
   type PropsWithChildren,
   type HTMLAttributes,
   type ReactNode,
+  forwardRef,
+  ComponentProps,
 } from "react";
 import { Stack } from "components/Stack/Stack";
-import type { CSSObject } from "@emotion/css";
+import { type CSSObject } from "@emotion/css";
 import { css, type Interpolation, type Theme, useTheme } from "@emotion/react";
-import { type ClassName, useClassName } from "hooks/useClassName";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  usePopover,
+} from "components/Popover/Popover";
 
 type Icon = typeof HelpIcon;
 
 type Size = "small" | "medium";
 
-export const HelpTooltipContext = createContext<
-  { open: boolean; onClose: () => void } | undefined
->(undefined);
-
-const useHelpTooltip = () => {
-  const helpTooltipContext = useContext(HelpTooltipContext);
-
-  if (!helpTooltipContext) {
-    throw new Error(
-      "This hook should be used in side of the HelpTooltipContext.",
-    );
-  }
+export const HelpTooltipIcon = HelpIcon;
 
-  return helpTooltipContext;
+export const HelpTooltip: FC<ComponentProps<typeof Popover>> = (props) => {
+  return <Popover mode="hover" {...props} />;
 };
 
-interface HelpPopoverProps extends PopoverProps {
-  onOpen: () => void;
-  onClose: () => void;
-}
-
-export const HelpPopover: FC<HelpPopoverProps> = ({
-  onOpen,
-  onClose,
-  children,
-  ...props
-}) => {
-  const popover = useClassName(classNames.popover, []);
-  const paper = useClassName(classNames.paper, []);
+export const HelpTooltipContent = (
+  props: ComponentProps<typeof PopoverContent>,
+) => {
+  const theme = useTheme();
 
   return (
-    <Popover
-      className={popover}
-      classes={{ paper }}
-      onClose={onClose}
-      anchorOrigin={{
-        vertical: "bottom",
-        horizontal: "left",
-      }}
-      transformOrigin={{
-        vertical: "top",
-        horizontal: "left",
-      }}
-      PaperProps={{
-        onMouseEnter: onOpen,
-        onMouseLeave: onClose,
-      }}
+    <PopoverContent
       {...props}
-    >
-      {children}
-    </Popover>
+      css={{
+        "& .MuiPaper-root": {
+          fontSize: 14,
+          width: 304,
+          padding: 20,
+          color: theme.palette.text.secondary,
+        },
+      }}
+    />
   );
 };
 
-export interface HelpTooltipProps {
-  // Useful to test on storybook
-  open?: boolean;
+type HelpTooltipTriggerProps = Omit<
+  HTMLAttributes<HTMLButtonElement>,
+  "size"
+> & {
   size?: Size;
-  icon?: Icon;
-  buttonStyles?: Interpolation<Theme>;
-  iconStyles?: Interpolation<Theme>;
-  children?: ReactNode;
-}
+};
 
-export const HelpTooltip: FC<HelpTooltipProps> = ({
-  children,
-  open = false,
-  size = "medium",
-  icon: Icon = HelpIcon,
-  buttonStyles,
-  iconStyles,
-}) => {
+export const HelpTooltipTrigger = forwardRef<
+  HTMLButtonElement,
+  HelpTooltipTriggerProps
+>((props, ref) => {
   const theme = useTheme();
-  const anchorRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(open);
-  const id = isOpen ? "help-popover" : undefined;
-
-  const onClose = () => {
-    setIsOpen(false);
-  };
+  const {
+    size = "medium",
+    children = <HelpTooltipIcon />,
+    ...buttonProps
+  } = props;
 
   return (
-    <>
+    <PopoverTrigger>
       <button
-        ref={anchorRef}
-        aria-describedby={id}
+        {...buttonProps}
+        aria-label="More info"
+        ref={ref}
         css={[
           css`
             display: flex;
@@ -126,45 +90,19 @@ export const HelpTooltip: FC<HelpTooltipProps> = ({
             &:hover {
               opacity: 0.75;
             }
+
+            & svg {
+              width: ${getIconSpacingFromSize(size)}px;
+              height: ${getIconSpacingFromSize(size)}px;
+            }
           `,
-          buttonStyles,
         ]}
-        onClick={(event) => {
-          event.stopPropagation();
-          setIsOpen(true);
-        }}
-        onMouseEnter={() => {
-          setIsOpen(true);
-        }}
-        onMouseLeave={() => {
-          setIsOpen(false);
-        }}
-        aria-label="More info"
       >
-        <Icon
-          css={[
-            {
-              width: theme.spacing(getIconSpacingFromSize(size)),
-              height: theme.spacing(getIconSpacingFromSize(size)),
-            },
-            iconStyles,
-          ]}
-        />
+        {children}
       </button>
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
-        <HelpTooltipContext.Provider value={{ open: isOpen, onClose }}>
-          {children}
-        </HelpTooltipContext.Provider>
-      </HelpPopover>
-    </>
+    </PopoverTrigger>
   );
-};
+});
 
 export const HelpTooltipTitle: FC<HTMLAttributes<HTMLHeadingElement>> = ({
   children,
@@ -213,7 +151,7 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
   onClick,
   ariaLabel,
 }) => {
-  const tooltip = useHelpTooltip();
+  const popover = usePopover();
 
   return (
     <button
@@ -222,7 +160,7 @@ export const HelpTooltipAction: FC<HelpTooltipActionProps> = ({
       onClick={(event) => {
         event.stopPropagation();
         onClick();
-        tooltip.onClose();
+        popover.setIsOpen(false);
       }}
     >
       <Icon css={styles.actionIcon} />
@@ -252,29 +190,13 @@ const getButtonSpacingFromSize = (size?: Size): number => {
 const getIconSpacingFromSize = (size?: Size): number => {
   switch (size) {
     case "small":
-      return 1.5;
+      return 12;
     case "medium":
     default:
-      return 2;
+      return 16;
   }
 };
 
-const classNames = {
-  popover: (css) => css`
-    pointer-events: none;
-  `,
-
-  paper: (css, theme) => css`
-    ${theme.typography.body2 as CSSObject}
-
-    margin-top: 4px;
-    width: 304px;
-    padding: 20px;
-    color: ${theme.palette.text.secondary};
-    pointer-events: auto;
-  `,
-} satisfies Record<string, ClassName>;
-
 const styles = {
   title: (theme) => ({
     marginTop: 0,
diff --git a/site/src/components/InfoTooltip/InfoTooltip.tsx b/site/src/components/InfoTooltip/InfoTooltip.tsx
index 1939c12382c66..ebef8bc66949f 100644
--- a/site/src/components/InfoTooltip/InfoTooltip.tsx
+++ b/site/src/components/InfoTooltip/InfoTooltip.tsx
@@ -1,10 +1,12 @@
 import { type FC, type ReactNode } from "react";
 import {
   HelpTooltip,
+  HelpTooltipContent,
+  HelpTooltipIcon,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
-import InfoIcon from "@mui/icons-material/InfoOutlined";
 import { Interpolation, Theme, css, useTheme } from "@emotion/react";
 
 interface InfoTooltipProps {
@@ -22,14 +24,16 @@ export const InfoTooltip: FC<InfoTooltipProps> = ({
   const theme = useTheme();
 
   return (
-    <HelpTooltip
-      size="small"
-      icon={InfoIcon}
-      iconStyles={{ color: theme.experimental.roles[type].outline }}
-      buttonStyles={styles.button}
-    >
-      <HelpTooltipTitle>{title}</HelpTooltipTitle>
-      <HelpTooltipText>{message}</HelpTooltipText>
+    <HelpTooltip>
+      <HelpTooltipTrigger size="small" css={styles.button}>
+        <HelpTooltipIcon
+          css={{ color: theme.experimental.roles[type].outline }}
+        />
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
+        <HelpTooltipTitle>{title}</HelpTooltipTitle>
+        <HelpTooltipText>{message}</HelpTooltipText>
+      </HelpTooltipContent>
     </HelpTooltip>
   );
 };
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index a6ee1757f67e6..5064c1c183bed 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -1,11 +1,13 @@
-import { type FC, useRef, useState } from "react";
+import { type FC } from "react";
 import { useTheme } from "@emotion/react";
 import { Theme } from "@mui/material/styles";
 import type { WorkspaceAgent, DERPRegion } from "api/typesGenerated";
 import {
   HelpTooltipText,
-  HelpPopover,
+  HelpTooltip,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
+  HelpTooltipContent,
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
 import { getLatencyColor } from "utils/latency";
@@ -31,9 +33,6 @@ const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
 
 export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
   const theme = useTheme();
-  const anchorRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "latency-popover" : undefined;
   const latency = getDisplayLatency(theme, agent);
 
   if (!latency || !agent.latency) {
@@ -41,24 +40,17 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
   }
 
   return (
-    <>
-      <span
-        role="presentation"
-        aria-label="latency"
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        css={{ cursor: "pointer", color: latency.color }}
-      >
-        {Math.round(Math.round(latency.latency_ms))}ms
-      </span>
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger>
+        <span
+          role="presentation"
+          aria-label="latency"
+          css={{ cursor: "pointer", color: latency.color }}
+        >
+          {Math.round(Math.round(latency.latency_ms))}ms
+        </span>
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <HelpTooltipTitle>Latency</HelpTooltipTitle>
         <HelpTooltipText>
           This is the latency overhead on non peer to peer connections. The
@@ -86,7 +78,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
               ))}
           </Stack>
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
index 8901b22385a56..403aaa61cb75d 100644
--- a/site/src/components/Resources/AgentOutdatedTooltip.tsx
+++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -1,19 +1,20 @@
-import { type ComponentProps, type FC } from "react";
+import { type FC } from "react";
 import { useTheme } from "@emotion/react";
 import RefreshIcon from "@mui/icons-material/RefreshOutlined";
 import {
-  HelpPopover,
+  HelpTooltip,
   HelpTooltipAction,
-  HelpTooltipContext,
+  HelpTooltipContent,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { agentVersionStatus } from "../../utils/workspace";
 
-type AgentOutdatedTooltipProps = ComponentProps<typeof HelpPopover> & {
+type AgentOutdatedTooltipProps = {
   agent: WorkspaceAgent;
   serverVersion: string;
   status: agentVersionStatus;
@@ -25,11 +26,6 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
   serverVersion,
   status,
   onUpdate,
-  onOpen,
-  id,
-  open,
-  onClose,
-  anchorEl,
 }) => {
   const theme = useTheme();
   const versionLabelStyles = {
@@ -50,14 +46,17 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
     "To fix this, you can stop and start the workspace.";
 
   return (
-    <HelpPopover
-      id={id}
-      open={open}
-      anchorEl={anchorEl}
-      onOpen={onOpen}
-      onClose={onClose}
-    >
-      <HelpTooltipContext.Provider value={{ open, onClose }}>
+    <HelpTooltip>
+      <HelpTooltipTrigger>
+        <span
+          role="presentation"
+          aria-label="latency"
+          css={{ cursor: "pointer" }}
+        >
+          {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
+        </span>
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <Stack spacing={1}>
           <div>
             <HelpTooltipTitle>{title}</HelpTooltipTitle>
@@ -84,7 +83,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
             </HelpTooltipAction>
           </HelpTooltipLinksGroup>
         </Stack>
-      </HelpTooltipContext.Provider>
-    </HelpPopover>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index 12280f8406f0d..3d1b78856bdab 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -4,11 +4,12 @@ import { WorkspaceAgent } from "api/typesGenerated";
 import { ChooseOne, Cond } from "components/Conditionals/ChooseOne";
 import WarningRounded from "@mui/icons-material/WarningRounded";
 import {
-  HelpPopover,
+  HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
-import { useRef, useState } from "react";
 import Link from "@mui/material/Link";
 
 // If we think in the agent status and lifecycle into a single enum/state I’d
@@ -43,27 +44,13 @@ const StartingLifecycle: React.FC = () => {
 const StartTimeoutLifecycle: React.FC<{
   agent: WorkspaceAgent;
 }> = ({ agent }) => {
-  const anchorRef = useRef<SVGSVGElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "timeout-popover" : undefined;
-
   return (
-    <>
-      <WarningRounded
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        role="status"
-        aria-label="Start timeout"
-        css={styles.timeoutWarning}
-      />
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger role="status">
+        <WarningRounded css={styles.timeoutWarning} />
+      </HelpTooltipTrigger>
+
+      <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to start</HelpTooltipTitle>
         <HelpTooltipText>
           We noticed this agent is taking longer than expected to start.{" "}
@@ -76,35 +63,20 @@ const StartTimeoutLifecycle: React.FC<{
           </Link>
           .
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
 
 const StartErrorLifecycle: React.FC<{
   agent: WorkspaceAgent;
 }> = ({ agent }) => {
-  const anchorRef = useRef<SVGSVGElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "timeout-popover" : undefined;
-
   return (
-    <>
-      <WarningRounded
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        role="status"
-        aria-label="Start error"
-        css={styles.errorWarning}
-      />
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger role="status" aria-label="Start error">
+        <WarningRounded css={styles.errorWarning} />
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
         <HelpTooltipText>
           Something went wrong during the agent startup.{" "}
@@ -117,8 +89,8 @@ const StartErrorLifecycle: React.FC<{
           </Link>
           .
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
 
@@ -137,27 +109,12 @@ const ShuttingDownLifecycle: React.FC = () => {
 const ShutdownTimeoutLifecycle: React.FC<{
   agent: WorkspaceAgent;
 }> = ({ agent }) => {
-  const anchorRef = useRef<SVGSVGElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "timeout-popover" : undefined;
-
   return (
-    <>
-      <WarningRounded
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        role="status"
-        aria-label="Stop timeout"
-        css={styles.timeoutWarning}
-      />
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger role="status" aria-label="Stop timeout">
+        <WarningRounded css={styles.timeoutWarning} />
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
         <HelpTooltipText>
           We noticed this agent is taking longer than expected to stop.{" "}
@@ -170,35 +127,20 @@ const ShutdownTimeoutLifecycle: React.FC<{
           </Link>
           .
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
 
 const ShutdownErrorLifecycle: React.FC<{
   agent: WorkspaceAgent;
 }> = ({ agent }) => {
-  const anchorRef = useRef<SVGSVGElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "timeout-popover" : undefined;
-
   return (
-    <>
-      <WarningRounded
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        role="status"
-        aria-label="Stop error"
-        css={styles.errorWarning}
-      />
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger role="status" aria-label="Stop error">
+        <WarningRounded css={styles.errorWarning} />
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
         <HelpTooltipText>
           Something went wrong while trying to stop the agent.{" "}
@@ -211,8 +153,8 @@ const ShutdownErrorLifecycle: React.FC<{
           </Link>
           .
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
 
@@ -293,27 +235,12 @@ const ConnectingStatus: React.FC = () => {
 const TimeoutStatus: React.FC<{
   agent: WorkspaceAgent;
 }> = ({ agent }) => {
-  const anchorRef = useRef<SVGSVGElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "timeout-popover" : undefined;
-
   return (
-    <>
-      <WarningRounded
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        role="status"
-        aria-label="Timeout"
-        css={styles.timeoutWarning}
-      />
-      <HelpPopover
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-      >
+    <HelpTooltip>
+      <HelpTooltipTrigger role="status" aria-label="Timeout">
+        <WarningRounded css={styles.timeoutWarning} />
+      </HelpTooltipTrigger>
+      <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
         <HelpTooltipText>
           We noticed this agent is taking longer than expected to connect.{" "}
@@ -326,8 +253,8 @@ const TimeoutStatus: React.FC<{
           </Link>
           .
         </HelpTooltipText>
-      </HelpPopover>
-    </>
+      </HelpTooltipContent>
+    </HelpTooltip>
   );
 };
 
diff --git a/site/src/components/Resources/AgentVersion.tsx b/site/src/components/Resources/AgentVersion.tsx
index e353802145d34..ca4195965b57f 100644
--- a/site/src/components/Resources/AgentVersion.tsx
+++ b/site/src/components/Resources/AgentVersion.tsx
@@ -1,4 +1,4 @@
-import { type FC, useRef, useState } from "react";
+import { type FC } from "react";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { agentVersionStatus, getDisplayVersionStatus } from "utils/workspace";
 import { AgentOutdatedTooltip } from "./AgentOutdatedTooltip";
@@ -9,9 +9,6 @@ export const AgentVersion: FC<{
   serverAPIVersion: string;
   onUpdate: () => void;
 }> = ({ agent, serverVersion, serverAPIVersion, onUpdate }) => {
-  const anchorRef = useRef<HTMLButtonElement>(null);
-  const [isOpen, setIsOpen] = useState(false);
-  const id = isOpen ? "version-outdated-popover" : undefined;
   const { status } = getDisplayVersionStatus(
     agent.version,
     serverVersion,
@@ -24,28 +21,11 @@ export const AgentVersion: FC<{
   }
 
   return (
-    <>
-      <span
-        role="presentation"
-        aria-label="latency"
-        ref={anchorRef}
-        onMouseEnter={() => setIsOpen(true)}
-        onMouseLeave={() => setIsOpen(false)}
-        css={{ cursor: "pointer" }}
-      >
-        {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
-      </span>
-      <AgentOutdatedTooltip
-        id={id}
-        open={isOpen}
-        anchorEl={anchorRef.current}
-        onOpen={() => setIsOpen(true)}
-        onClose={() => setIsOpen(false)}
-        agent={agent}
-        serverVersion={serverVersion}
-        status={status}
-        onUpdate={onUpdate}
-      />
-    </>
+    <AgentOutdatedTooltip
+      agent={agent}
+      serverVersion={serverVersion}
+      status={status}
+      onUpdate={onUpdate}
+    />
   );
 };
diff --git a/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index c93d91366ecfc..1a439144c1018 100644
--- a/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -9,10 +9,13 @@ import { templateVersion } from "api/queries/templates";
 import {
   HelpTooltip,
   HelpTooltipAction,
+  HelpTooltipContent,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
+import { usePopover } from "components/Popover/Popover";
 
 export const Language = {
   outdatedLabel: "Outdated",
@@ -28,22 +31,33 @@ interface TooltipProps {
   ariaLabel?: string;
 }
 
-export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
-  onUpdateVersion,
-  ariaLabel,
-  latestVersionId,
-  templateName,
-}) => {
-  const { data: activeVersion } = useQuery(templateVersion(latestVersionId));
+export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
+  return (
+    <HelpTooltip>
+      <HelpTooltipTrigger
+        size="small"
+        aria-label="More info"
+        css={styles.button}
+      >
+        <InfoIcon css={styles.icon} />
+      </HelpTooltipTrigger>
+
+      <OutdatedTooltipContent {...props} />
+    </HelpTooltip>
+  );
+};
+
+const OutdatedTooltipContent = (props: TooltipProps) => {
+  const popover = usePopover();
+  const { onUpdateVersion, ariaLabel, latestVersionId, templateName } = props;
+  const { data: activeVersion } = useQuery({
+    ...templateVersion(latestVersionId),
+    enabled: popover.isOpen,
+  });
   const theme = useTheme();
 
   return (
-    <HelpTooltip
-      size="small"
-      icon={InfoIcon}
-      iconStyles={styles.icon}
-      buttonStyles={styles.button}
-    >
+    <HelpTooltipContent>
       <HelpTooltipTitle>{Language.outdatedLabel}</HelpTooltipTitle>
       <HelpTooltipText>{Language.versionTooltipText}</HelpTooltipText>
 
@@ -90,7 +104,7 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = ({
           {Language.updateVersionLabel}
         </HelpTooltipAction>
       </HelpTooltipLinksGroup>
-    </HelpTooltip>
+    </HelpTooltipContent>
   );
 };
 
diff --git a/site/src/pages/AuditPage/AuditHelpTooltip.tsx b/site/src/pages/AuditPage/AuditHelpTooltip.tsx
index 597402adb78a6..7118bdd2390d6 100644
--- a/site/src/pages/AuditPage/AuditHelpTooltip.tsx
+++ b/site/src/pages/AuditPage/AuditHelpTooltip.tsx
@@ -1,10 +1,12 @@
 import { FC } from "react";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { docs } from "utils/docs";
 
@@ -17,13 +19,17 @@ export const Language = {
 export const AuditHelpTooltip: FC = () => {
   return (
     <HelpTooltip>
-      <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
-      <HelpTooltipText>{Language.body}</HelpTooltipText>
-      <HelpTooltipLinksGroup>
-        <HelpTooltipLink href={docs("/admin/audit-logs")}>
-          {Language.docs}
-        </HelpTooltipLink>
-      </HelpTooltipLinksGroup>
+      <HelpTooltipTrigger />
+
+      <HelpTooltipContent>
+        <HelpTooltipTitle>{Language.title}</HelpTooltipTitle>
+        <HelpTooltipText>{Language.body}</HelpTooltipText>
+        <HelpTooltipLinksGroup>
+          <HelpTooltipLink href={docs("/admin/audit-logs")}>
+            {Language.docs}
+          </HelpTooltipLink>
+        </HelpTooltipLinksGroup>
+      </HelpTooltipContent>
     </HelpTooltip>
   );
 };
diff --git a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
index a2300cb06161d..af96ee7b913b5 100644
--- a/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
+++ b/site/src/pages/TemplatePage/TemplateInsightsPage/TemplateInsightsPage.tsx
@@ -46,6 +46,8 @@ import {
   HelpTooltip,
   HelpTooltipTitle,
   HelpTooltipText,
+  HelpTooltipContent,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { UserAvatar } from "components/UserAvatar/UserAvatar";
 import { getLatencyColor } from "utils/latency";
@@ -281,14 +283,18 @@ const UsersLatencyPanel: FC<UsersLatencyPanelProps> = ({
       <PanelHeader>
         <PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
           Latency by user
-          <HelpTooltip size="small">
-            <HelpTooltipTitle>How is latency calculated?</HelpTooltipTitle>
-            <HelpTooltipText>
-              The median round trip time of user connections to workspaces.
-            </HelpTooltipText>
+          <HelpTooltip>
+            <HelpTooltipTrigger size="small" />
+            <HelpTooltipContent>
+              <HelpTooltipTitle>How is latency calculated?</HelpTooltipTitle>
+              <HelpTooltipText>
+                The median round trip time of user connections to workspaces.
+              </HelpTooltipText>
+            </HelpTooltipContent>
           </HelpTooltip>
         </PanelTitle>
       </PanelHeader>
+
       <PanelContent>
         {!data && <Loader css={{ height: "100%" }} />}
         {users && users.length === 0 && <NoDataAvailable />}
@@ -348,12 +354,15 @@ const UsersActivityPanel: FC<UsersActivityPanelProps> = ({
       <PanelHeader>
         <PanelTitle css={{ display: "flex", alignItems: "center", gap: 8 }}>
           Activity by user
-          <HelpTooltip size="small">
-            <HelpTooltipTitle>How is activity calculated?</HelpTooltipTitle>
-            <HelpTooltipText>
-              When a connection is initiated to a user&apos;s workspace they are
-              considered an active user. e.g. apps, web terminal, SSH
-            </HelpTooltipText>
+          <HelpTooltip>
+            <HelpTooltipTrigger size="small" />
+            <HelpTooltipContent>
+              <HelpTooltipTitle>How is activity calculated?</HelpTooltipTitle>
+              <HelpTooltipText>
+                When a connection is initiated to a user&apos;s workspace they
+                are considered an active user. e.g. apps, web terminal, SSH
+              </HelpTooltipText>
+            </HelpTooltipContent>
           </HelpTooltip>
         </PanelTitle>
       </PanelHeader>
diff --git a/site/src/pages/TemplatesPage/TemplatesPageView.tsx b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
index e9aef584fc0fa..273990e4afbe8 100644
--- a/site/src/pages/TemplatesPage/TemplatesPageView.tsx
+++ b/site/src/pages/TemplatesPage/TemplatesPageView.tsx
@@ -28,10 +28,12 @@ import {
 } from "components/TableLoader/TableLoader";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { EmptyTemplates } from "./EmptyTemplates";
 import { useClickableTableRow } from "hooks/useClickableTableRow";
@@ -63,13 +65,16 @@ export const Language = {
 const TemplateHelpTooltip: FC = () => {
   return (
     <HelpTooltip>
-      <HelpTooltipTitle>{Language.templateTooltipTitle}</HelpTooltipTitle>
-      <HelpTooltipText>{Language.templateTooltipText}</HelpTooltipText>
-      <HelpTooltipLinksGroup>
-        <HelpTooltipLink href={docs("/templates")}>
-          {Language.templateTooltipLink}
-        </HelpTooltipLink>
-      </HelpTooltipLinksGroup>
+      <HelpTooltipTrigger />
+      <HelpTooltipContent>
+        <HelpTooltipTitle>{Language.templateTooltipTitle}</HelpTooltipTitle>
+        <HelpTooltipText>{Language.templateTooltipText}</HelpTooltipText>
+        <HelpTooltipLinksGroup>
+          <HelpTooltipLink href={docs("/templates")}>
+            {Language.templateTooltipLink}
+          </HelpTooltipLink>
+        </HelpTooltipLinksGroup>
+      </HelpTooltipContent>
     </HelpTooltip>
   );
 };
diff --git a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
index e99548825cc2d..9221cb2339c41 100644
--- a/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
+++ b/site/src/pages/UsersPage/UsersTable/EditRolesButton.tsx
@@ -8,8 +8,10 @@ import UserIcon from "@mui/icons-material/PersonOutline";
 import { Role } from "api/typesGenerated";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import {
   Popover,
@@ -101,11 +103,14 @@ export const EditRolesButton: FC<EditRolesButtonProps> = ({
 
   if (!canSetRoles) {
     return (
-      <HelpTooltip size="small">
-        <HelpTooltipTitle>Externally controlled</HelpTooltipTitle>
-        <HelpTooltipText>
-          Roles for this user are controlled by the OIDC identity provider.
-        </HelpTooltipText>
+      <HelpTooltip>
+        <HelpTooltipTrigger size="small" />
+        <HelpTooltipContent>
+          <HelpTooltipTitle>Externally controlled</HelpTooltipTitle>
+          <HelpTooltipText>
+            Roles for this user are controlled by the OIDC identity provider.
+          </HelpTooltipText>
+        </HelpTooltipContent>
       </HelpTooltip>
     );
   }
diff --git a/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx b/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
index 2f8109b9bedfc..d26d4a64a969c 100644
--- a/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
+++ b/site/src/pages/UsersPage/UsersTable/TableColumnHelpTooltip.tsx
@@ -1,10 +1,12 @@
 import { FC } from "react";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { docs } from "utils/docs";
 
@@ -42,17 +44,19 @@ export const TableColumnHelpTooltip: FC<Props> = ({ variant }) => {
   const variantLang = Language[variant];
 
   return (
-    <HelpTooltip size="small">
-      <HelpTooltipTitle>{variantLang.title}</HelpTooltipTitle>
-      <HelpTooltipText>{variantLang.text}</HelpTooltipText>
-
-      <HelpTooltipLinksGroup>
-        {variantLang.links.map((link) => (
-          <HelpTooltipLink key={link.text} href={link.href}>
-            {link.text}
-          </HelpTooltipLink>
-        ))}
-      </HelpTooltipLinksGroup>
+    <HelpTooltip>
+      <HelpTooltipTrigger size="small" />
+      <HelpTooltipContent>
+        <HelpTooltipTitle>{variantLang.title}</HelpTooltipTitle>
+        <HelpTooltipText>{variantLang.text}</HelpTooltipText>
+        <HelpTooltipLinksGroup>
+          {variantLang.links.map((link) => (
+            <HelpTooltipLink key={link.text} href={link.href}>
+              {link.text}
+            </HelpTooltipLink>
+          ))}
+        </HelpTooltipLinksGroup>
+      </HelpTooltipContent>
     </HelpTooltip>
   );
 };
diff --git a/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx b/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
index 7db515e3e20fd..e5b1db60b683e 100644
--- a/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspaceHelpTooltip.tsx
@@ -1,10 +1,12 @@
 import { FC } from "react";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipLink,
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { docs } from "utils/docs";
 
@@ -20,16 +22,19 @@ const Language = {
 export const WorkspaceHelpTooltip: FC = () => {
   return (
     <HelpTooltip>
-      <HelpTooltipTitle>{Language.workspaceTooltipTitle}</HelpTooltipTitle>
-      <HelpTooltipText>{Language.workspaceTooltipText}</HelpTooltipText>
-      <HelpTooltipLinksGroup>
-        <HelpTooltipLink href={docs("/workspaces")}>
-          {Language.workspaceTooltipLink1}
-        </HelpTooltipLink>
-        <HelpTooltipLink href={docs("/ides")}>
-          {Language.workspaceTooltipLink2}
-        </HelpTooltipLink>
-      </HelpTooltipLinksGroup>
+      <HelpTooltipTrigger />
+      <HelpTooltipContent>
+        <HelpTooltipTitle>{Language.workspaceTooltipTitle}</HelpTooltipTitle>
+        <HelpTooltipText>{Language.workspaceTooltipText}</HelpTooltipText>
+        <HelpTooltipLinksGroup>
+          <HelpTooltipLink href={docs("/workspaces")}>
+            {Language.workspaceTooltipLink1}
+          </HelpTooltipLink>
+          <HelpTooltipLink href={docs("/ides")}>
+            {Language.workspaceTooltipLink2}
+          </HelpTooltipLink>
+        </HelpTooltipLinksGroup>
+      </HelpTooltipContent>
     </HelpTooltip>
   );
 };

From 94390a692f25c24b5b41b9a282f56cc7096c04c8 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 14:28:20 +0000
Subject: [PATCH 02/10] Fix size type

---
 site/src/components/HelpTooltip/HelpTooltip.tsx | 5 +----
 1 file changed, 1 insertion(+), 4 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 05e7fcd87dee1..ed659aebd07db 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -49,10 +49,7 @@ export const HelpTooltipContent = (
   );
 };
 
-type HelpTooltipTriggerProps = Omit<
-  HTMLAttributes<HTMLButtonElement>,
-  "size"
-> & {
+type HelpTooltipTriggerProps = HTMLAttributes<HTMLButtonElement> & {
   size?: Size;
 };
 

From 77fec0e0e7545594d4eab67f20e6aaaedbe55c90 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 14:29:13 +0000
Subject: [PATCH 03/10] Remove duplicated math round

---
 site/src/components/Resources/AgentLatency.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index 5064c1c183bed..7b2329b8e45a8 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -47,7 +47,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
           aria-label="latency"
           css={{ cursor: "pointer", color: latency.color }}
         >
-          {Math.round(Math.round(latency.latency_ms))}ms
+          {Math.round(latency.latency_ms)}ms
         </span>
       </HelpTooltipTrigger>
       <HelpTooltipContent>

From 0d4e728c1f37b12fe40a999dac6448737f4f7301 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 14:30:59 +0000
Subject: [PATCH 04/10] Fix agent outdated tooltip role

---
 site/src/components/Resources/AgentOutdatedTooltip.tsx | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
index 403aaa61cb75d..e76685721e777 100644
--- a/site/src/components/Resources/AgentOutdatedTooltip.tsx
+++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -48,11 +48,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
   return (
     <HelpTooltip>
       <HelpTooltipTrigger>
-        <span
-          role="presentation"
-          aria-label="latency"
-          css={{ cursor: "pointer" }}
-        >
+        <span role="status" css={{ cursor: "pointer" }}>
           {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
         </span>
       </HelpTooltipTrigger>

From 11d56b1248a2ebd79037e36fb3c61191cdfafdcf Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 15:14:46 +0000
Subject: [PATCH 05/10] Fix diff use cases

---
 .../components/HelpTooltip/HelpTooltip.tsx    | 32 +++++++---------
 .../src/components/Resources/AgentLatency.tsx |  2 +-
 .../Resources/AgentOutdatedTooltip.tsx        |  2 +-
 site/src/components/Resources/AgentStatus.tsx | 26 ++++++++++---
 .../CreateTemplatePage/CreateTemplateForm.tsx | 37 ++++++++++++-------
 5 files changed, 59 insertions(+), 40 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index ed659aebd07db..96b8f9e2030b3 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -51,6 +51,7 @@ export const HelpTooltipContent = (
 
 type HelpTooltipTriggerProps = HTMLAttributes<HTMLButtonElement> & {
   size?: Size;
+  hoverEffect?: boolean;
 };
 
 export const HelpTooltipTrigger = forwardRef<
@@ -61,9 +62,17 @@ export const HelpTooltipTrigger = forwardRef<
   const {
     size = "medium",
     children = <HelpTooltipIcon />,
+    hoverEffect = true,
     ...buttonProps
   } = props;
 
+  const hoverEffectStyles = css({
+    opacity: 0.5,
+    "&:hover": {
+      opacity: 0.75,
+    },
+  });
+
   return (
     <PopoverTrigger>
       <button
@@ -75,24 +84,19 @@ export const HelpTooltipTrigger = forwardRef<
             display: flex;
             align-items: center;
             justify-content: center;
-            width: ${theme.spacing(getButtonSpacingFromSize(size))};
-            height: ${theme.spacing(getButtonSpacingFromSize(size))};
-            padding: 0;
+            padding: 4px 0;
             border: 0;
             background: transparent;
-            color: ${theme.palette.text.primary};
-            opacity: 0.5;
             cursor: pointer;
-
-            &:hover {
-              opacity: 0.75;
-            }
+            color: inherit;
 
             & svg {
+              color: ${theme.palette.text.primary};
               width: ${getIconSpacingFromSize(size)}px;
               height: ${getIconSpacingFromSize(size)}px;
             }
           `,
+          hoverEffect ? hoverEffectStyles : null,
         ]}
       >
         {children}
@@ -174,16 +178,6 @@ export const HelpTooltipLinksGroup: FC<PropsWithChildren> = ({ children }) => {
   );
 };
 
-const getButtonSpacingFromSize = (size?: Size): number => {
-  switch (size) {
-    case "small":
-      return 2.5;
-    case "medium":
-    default:
-      return 3;
-  }
-};
-
 const getIconSpacingFromSize = (size?: Size): number => {
   switch (size) {
     case "small":
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index 7b2329b8e45a8..4a156de4d3838 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -41,7 +41,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
 
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger>
+      <HelpTooltipTrigger hoverEffect={false}>
         <span
           role="presentation"
           aria-label="latency"
diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
index e76685721e777..728cdcae438e0 100644
--- a/site/src/components/Resources/AgentOutdatedTooltip.tsx
+++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -47,7 +47,7 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
 
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger>
+      <HelpTooltipTrigger hoverEffect={false}>
         <span role="status" css={{ cursor: "pointer" }}>
           {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
         </span>
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index 3d1b78856bdab..583f45b4c8883 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -46,7 +46,7 @@ const StartTimeoutLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status">
+      <HelpTooltipTrigger role="status" hoverEffect={false}>
         <WarningRounded css={styles.timeoutWarning} />
       </HelpTooltipTrigger>
 
@@ -73,7 +73,11 @@ const StartErrorLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Start error">
+      <HelpTooltipTrigger
+        role="status"
+        hoverEffect={false}
+        aria-label="Start error"
+      >
         <WarningRounded css={styles.errorWarning} />
       </HelpTooltipTrigger>
       <HelpTooltipContent>
@@ -111,7 +115,11 @@ const ShutdownTimeoutLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Stop timeout">
+      <HelpTooltipTrigger
+        role="status"
+        hoverEffect={false}
+        aria-label="Stop timeout"
+      >
         <WarningRounded css={styles.timeoutWarning} />
       </HelpTooltipTrigger>
       <HelpTooltipContent>
@@ -137,7 +145,11 @@ const ShutdownErrorLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Stop error">
+      <HelpTooltipTrigger
+        role="status"
+        hoverEffect={false}
+        aria-label="Stop error"
+      >
         <WarningRounded css={styles.errorWarning} />
       </HelpTooltipTrigger>
       <HelpTooltipContent>
@@ -237,7 +249,11 @@ const TimeoutStatus: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Timeout">
+      <HelpTooltipTrigger
+        role="status"
+        hoverEffect={false}
+        aria-label="Timeout"
+      >
         <WarningRounded css={styles.timeoutWarning} />
       </HelpTooltipTrigger>
       <HelpTooltipContent>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index be2d80b23e5bb..12fc980d20dbe 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -23,7 +23,9 @@ import * as Yup from "yup";
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipText,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { LazyIconField } from "components/IconField/LazyIconField";
 import Link from "@mui/material/Link";
@@ -572,10 +574,13 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                     </strong>
 
                     <HelpTooltip>
-                      <HelpTooltipText>
-                        If checked, users may be able to corrupt their
-                        workspace.
-                      </HelpTooltipText>
+                      <HelpTooltipTrigger size="small" />
+                      <HelpTooltipContent>
+                        <HelpTooltipText>
+                          If checked, users may be able to corrupt their
+                          workspace.
+                        </HelpTooltipText>
+                      </HelpTooltipContent>
                     </HelpTooltip>
                   </Stack>
                   <span css={styles.optionHelperText}>
@@ -608,16 +613,20 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                     <strong>Allow everyone to use the template</strong>
 
                     <HelpTooltip>
-                      <HelpTooltipText>
-                        If unchecked, only users with the &apos;template
-                        admin&apos; and &apos;owner&apos; role can use this
-                        template until the permissions are updated. Navigate to{" "}
-                        <strong>
-                          Templates &gt; Select a template &gt; Settings &gt;
-                          Permissions
-                        </strong>{" "}
-                        to update permissions.
-                      </HelpTooltipText>
+                      <HelpTooltipTrigger size="small" />
+                      <HelpTooltipContent>
+                        <HelpTooltipText>
+                          If unchecked, only users with the &apos;template
+                          admin&apos; and &apos;owner&apos; role can use this
+                          template until the permissions are updated. Navigate
+                          to{" "}
+                          <strong>
+                            Templates &gt; Select a template &gt; Settings &gt;
+                            Permissions
+                          </strong>{" "}
+                          to update permissions.
+                        </HelpTooltipText>
+                      </HelpTooltipContent>
                     </HelpTooltip>
                   </Stack>
                   <span css={styles.optionHelperText}>

From 06fc2ed76b6823a04f3bd9e77650d5045c04b854 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Mon, 18 Dec 2023 15:40:56 +0000
Subject: [PATCH 06/10] Fix a few use cases

---
 site/src/components/Popover/Popover.tsx       |  7 +++-
 .../src/components/Resources/AgentLatency.tsx |  6 +--
 .../Resources/AgentOutdatedTooltip.tsx        |  6 +--
 site/src/components/Resources/AgentStatus.tsx | 22 +++++------
 .../CreateTemplatePage/CreateTemplateForm.tsx | 37 ++++++++++++-------
 5 files changed, 46 insertions(+), 32 deletions(-)

diff --git a/site/src/components/Popover/Popover.tsx b/site/src/components/Popover/Popover.tsx
index 489d3d85dcb8c..f67cf4612cbb8 100644
--- a/site/src/components/Popover/Popover.tsx
+++ b/site/src/components/Popover/Popover.tsx
@@ -9,6 +9,7 @@ import {
   useId,
   useRef,
   useState,
+  HTMLAttributes,
 } from "react";
 // This is used as base for the main Popover component
 // eslint-disable-next-line no-restricted-imports -- Read above
@@ -79,8 +80,11 @@ export const usePopover = () => {
   return context;
 };
 
-export const PopoverTrigger = (props: { children: TriggerElement }) => {
+export const PopoverTrigger = (
+  props: HTMLAttributes<HTMLElement> & { children: TriggerElement },
+) => {
   const popover = usePopover();
+  const { children, ...elementProps } = props;
 
   const clickProps = {
     onClick: () => {
@@ -98,6 +102,7 @@ export const PopoverTrigger = (props: { children: TriggerElement }) => {
   };
 
   return cloneElement(props.children, {
+    ...elementProps,
     ...(popover.mode === "click" ? clickProps : hoverProps),
     "aria-haspopup": true,
     "aria-owns": popover.isOpen ? popover.id : undefined,
diff --git a/site/src/components/Resources/AgentLatency.tsx b/site/src/components/Resources/AgentLatency.tsx
index 7b2329b8e45a8..c6042da53120c 100644
--- a/site/src/components/Resources/AgentLatency.tsx
+++ b/site/src/components/Resources/AgentLatency.tsx
@@ -6,11 +6,11 @@ import {
   HelpTooltipText,
   HelpTooltip,
   HelpTooltipTitle,
-  HelpTooltipTrigger,
   HelpTooltipContent,
 } from "components/HelpTooltip/HelpTooltip";
 import { Stack } from "components/Stack/Stack";
 import { getLatencyColor } from "utils/latency";
+import { PopoverTrigger } from "components/Popover/Popover";
 
 const getDisplayLatency = (theme: Theme, agent: WorkspaceAgent) => {
   // Find the right latency to display
@@ -41,7 +41,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
 
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger>
+      <PopoverTrigger>
         <span
           role="presentation"
           aria-label="latency"
@@ -49,7 +49,7 @@ export const AgentLatency: FC<{ agent: WorkspaceAgent }> = ({ agent }) => {
         >
           {Math.round(latency.latency_ms)}ms
         </span>
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <HelpTooltipTitle>Latency</HelpTooltipTitle>
         <HelpTooltipText>
diff --git a/site/src/components/Resources/AgentOutdatedTooltip.tsx b/site/src/components/Resources/AgentOutdatedTooltip.tsx
index e76685721e777..e2432ed279665 100644
--- a/site/src/components/Resources/AgentOutdatedTooltip.tsx
+++ b/site/src/components/Resources/AgentOutdatedTooltip.tsx
@@ -8,11 +8,11 @@ import {
   HelpTooltipLinksGroup,
   HelpTooltipText,
   HelpTooltipTitle,
-  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import type { WorkspaceAgent } from "api/typesGenerated";
 import { Stack } from "components/Stack/Stack";
 import { agentVersionStatus } from "../../utils/workspace";
+import { PopoverTrigger } from "components/Popover/Popover";
 
 type AgentOutdatedTooltipProps = {
   agent: WorkspaceAgent;
@@ -47,11 +47,11 @@ export const AgentOutdatedTooltip: FC<AgentOutdatedTooltipProps> = ({
 
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger>
+      <PopoverTrigger>
         <span role="status" css={{ cursor: "pointer" }}>
           {status === agentVersionStatus.Outdated ? "Outdated" : "Deprecated"}
         </span>
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <Stack spacing={1}>
           <div>
diff --git a/site/src/components/Resources/AgentStatus.tsx b/site/src/components/Resources/AgentStatus.tsx
index 3d1b78856bdab..706aa5edcdce7 100644
--- a/site/src/components/Resources/AgentStatus.tsx
+++ b/site/src/components/Resources/AgentStatus.tsx
@@ -8,9 +8,9 @@ import {
   HelpTooltipContent,
   HelpTooltipText,
   HelpTooltipTitle,
-  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import Link from "@mui/material/Link";
+import { PopoverTrigger } from "components/Popover/Popover";
 
 // If we think in the agent status and lifecycle into a single enum/state I’d
 // say we would have: connecting, timeout, disconnected, connected:created,
@@ -46,9 +46,9 @@ const StartTimeoutLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status">
+      <PopoverTrigger role="status" aria-label="Agent timeout">
         <WarningRounded css={styles.timeoutWarning} />
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
 
       <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to start</HelpTooltipTitle>
@@ -73,9 +73,9 @@ const StartErrorLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Start error">
+      <PopoverTrigger role="status" aria-label="Start error">
         <WarningRounded css={styles.errorWarning} />
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <HelpTooltipTitle>Error starting the agent</HelpTooltipTitle>
         <HelpTooltipText>
@@ -111,9 +111,9 @@ const ShutdownTimeoutLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Stop timeout">
+      <PopoverTrigger role="status" aria-label="Stop timeout">
         <WarningRounded css={styles.timeoutWarning} />
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to stop</HelpTooltipTitle>
         <HelpTooltipText>
@@ -137,9 +137,9 @@ const ShutdownErrorLifecycle: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Stop error">
+      <PopoverTrigger role="status" aria-label="Stop error">
         <WarningRounded css={styles.errorWarning} />
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <HelpTooltipTitle>Error stopping the agent</HelpTooltipTitle>
         <HelpTooltipText>
@@ -237,9 +237,9 @@ const TimeoutStatus: React.FC<{
 }> = ({ agent }) => {
   return (
     <HelpTooltip>
-      <HelpTooltipTrigger role="status" aria-label="Timeout">
+      <PopoverTrigger role="status" aria-label="Timeout">
         <WarningRounded css={styles.timeoutWarning} />
-      </HelpTooltipTrigger>
+      </PopoverTrigger>
       <HelpTooltipContent>
         <HelpTooltipTitle>Agent is taking too long to connect</HelpTooltipTitle>
         <HelpTooltipText>
diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index be2d80b23e5bb..12fc980d20dbe 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -23,7 +23,9 @@ import * as Yup from "yup";
 import { WorkspaceBuildLogs } from "components/WorkspaceBuildLogs/WorkspaceBuildLogs";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipText,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { LazyIconField } from "components/IconField/LazyIconField";
 import Link from "@mui/material/Link";
@@ -572,10 +574,13 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                     </strong>
 
                     <HelpTooltip>
-                      <HelpTooltipText>
-                        If checked, users may be able to corrupt their
-                        workspace.
-                      </HelpTooltipText>
+                      <HelpTooltipTrigger size="small" />
+                      <HelpTooltipContent>
+                        <HelpTooltipText>
+                          If checked, users may be able to corrupt their
+                          workspace.
+                        </HelpTooltipText>
+                      </HelpTooltipContent>
                     </HelpTooltip>
                   </Stack>
                   <span css={styles.optionHelperText}>
@@ -608,16 +613,20 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                     <strong>Allow everyone to use the template</strong>
 
                     <HelpTooltip>
-                      <HelpTooltipText>
-                        If unchecked, only users with the &apos;template
-                        admin&apos; and &apos;owner&apos; role can use this
-                        template until the permissions are updated. Navigate to{" "}
-                        <strong>
-                          Templates &gt; Select a template &gt; Settings &gt;
-                          Permissions
-                        </strong>{" "}
-                        to update permissions.
-                      </HelpTooltipText>
+                      <HelpTooltipTrigger size="small" />
+                      <HelpTooltipContent>
+                        <HelpTooltipText>
+                          If unchecked, only users with the &apos;template
+                          admin&apos; and &apos;owner&apos; role can use this
+                          template until the permissions are updated. Navigate
+                          to{" "}
+                          <strong>
+                            Templates &gt; Select a template &gt; Settings &gt;
+                            Permissions
+                          </strong>{" "}
+                          to update permissions.
+                        </HelpTooltipText>
+                      </HelpTooltipContent>
                     </HelpTooltip>
                   </Stack>
                   <span css={styles.optionHelperText}>

From 89ec3dfc1830160d6986379f4d856fdfe0731f14 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Dec 2023 12:43:12 +0000
Subject: [PATCH 07/10] Fix colors

---
 site/src/components/HelpTooltip/HelpTooltip.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/site/src/components/HelpTooltip/HelpTooltip.tsx b/site/src/components/HelpTooltip/HelpTooltip.tsx
index 96b8f9e2030b3..76144ca608ab5 100644
--- a/site/src/components/HelpTooltip/HelpTooltip.tsx
+++ b/site/src/components/HelpTooltip/HelpTooltip.tsx
@@ -58,7 +58,6 @@ export const HelpTooltipTrigger = forwardRef<
   HTMLButtonElement,
   HelpTooltipTriggerProps
 >((props, ref) => {
-  const theme = useTheme();
   const {
     size = "medium",
     children = <HelpTooltipIcon />,
@@ -91,7 +90,6 @@ export const HelpTooltipTrigger = forwardRef<
             color: inherit;
 
             & svg {
-              color: ${theme.palette.text.primary};
               width: ${getIconSpacingFromSize(size)}px;
               height: ${getIconSpacingFromSize(size)}px;
             }

From 9ff6ad02547575b970662ed633e8da728872bcd5 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Dec 2023 12:45:19 +0000
Subject: [PATCH 08/10] Make gylphi more accessible

---
 site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
index 12fc980d20dbe..c87d9cefe3936 100644
--- a/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
+++ b/site/src/pages/CreateTemplatePage/CreateTemplateForm.tsx
@@ -621,7 +621,8 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
                           template until the permissions are updated. Navigate
                           to{" "}
                           <strong>
-                            Templates &gt; Select a template &gt; Settings &gt;
+                            Templates <MenuPath /> Select a template{" "}
+                            <MenuPath /> Settings <MenuPath />
                             Permissions
                           </strong>{" "}
                           to update permissions.
@@ -693,6 +694,10 @@ export const CreateTemplateForm: FC<CreateTemplateFormProps> = (props) => {
   );
 };
 
+const MenuPath = () => {
+  return <span aria-label="in">&gt;</span>;
+};
+
 const fillNameAndDisplayWithFilename = async (
   filename: string,
   form: ReturnType<typeof useFormik<CreateTemplateData>>,

From 30432e61f1634e59c8b49b010b5bf1bf89379d51 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Dec 2023 13:12:40 +0000
Subject: [PATCH 09/10] Fix tooltip on template settings

---
 .../TemplateSettingsForm.tsx                  | 21 +++++++++++++------
 1 file changed, 15 insertions(+), 6 deletions(-)

diff --git a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
index 6e5878eba5490..eab1957c7c486 100644
--- a/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
+++ b/site/src/pages/TemplateSettingsPage/TemplateGeneralSettingsPage/TemplateSettingsForm.tsx
@@ -22,7 +22,9 @@ import { Stack } from "components/Stack/Stack";
 import Checkbox from "@mui/material/Checkbox";
 import {
   HelpTooltip,
+  HelpTooltipContent,
   HelpTooltipText,
+  HelpTooltipTrigger,
 } from "components/HelpTooltip/HelpTooltip";
 import { EnterpriseBadge } from "components/Badges/Badges";
 
@@ -161,9 +163,13 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
                 >
                   Allow users to cancel in-progress workspace jobs.
                   <HelpTooltip>
-                    <HelpTooltipText>
-                      If checked, users may be able to corrupt their workspace.
-                    </HelpTooltipText>
+                    <HelpTooltipTrigger />
+                    <HelpTooltipContent>
+                      <HelpTooltipText>
+                        If checked, users may be able to corrupt their
+                        workspace.
+                      </HelpTooltipText>
+                    </HelpTooltipContent>
                   </HelpTooltip>
                 </Stack>
                 <span css={styles.optionHelperText}>
@@ -193,9 +199,12 @@ export const TemplateSettingsForm: FC<TemplateSettingsForm> = ({
                   >
                     Require workspaces automatically update when started.
                     <HelpTooltip>
-                      <HelpTooltipText>
-                        This setting is not enforced for template admins.
-                      </HelpTooltipText>
+                      <HelpTooltipTrigger />
+                      <HelpTooltipContent>
+                        <HelpTooltipText>
+                          This setting is not enforced for template admins.
+                        </HelpTooltipText>
+                      </HelpTooltipContent>
                     </HelpTooltip>
                   </Stack>
                   <span css={styles.optionHelperText}>

From 3f20de870d822c72315d605d8534e7223e331b41 Mon Sep 17 00:00:00 2001
From: BrunoQuaresma <bruno_nonato_quaresma@hotmail.com>
Date: Tue, 19 Dec 2023 13:33:41 +0000
Subject: [PATCH 10/10] Fix workspace outdated tooltip spacing

---
 .../WorkspaceOutdatedTooltip.tsx                     | 12 ++----------
 site/src/pages/WorkspacePage/WorkspaceStats.tsx      |  4 ++--
 site/src/pages/WorkspacesPage/WorkspacesTable.tsx    |  2 +-
 3 files changed, 5 insertions(+), 13 deletions(-)

diff --git a/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx b/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
index 1a439144c1018..7f8cdf6915f66 100644
--- a/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
+++ b/site/src/components/WorkspaceOutdatedTooltip/WorkspaceOutdatedTooltip.tsx
@@ -4,7 +4,7 @@ import Skeleton from "@mui/material/Skeleton";
 import Link from "@mui/material/Link";
 import { type FC } from "react";
 import { useQuery } from "react-query";
-import { type Interpolation, type Theme, css, useTheme } from "@emotion/react";
+import { type Interpolation, type Theme, useTheme } from "@emotion/react";
 import { templateVersion } from "api/queries/templates";
 import {
   HelpTooltip,
@@ -37,7 +37,7 @@ export const WorkspaceOutdatedTooltip: FC<TooltipProps> = (props) => {
       <HelpTooltipTrigger
         size="small"
         aria-label="More info"
-        css={styles.button}
+        hoverEffect={false}
       >
         <InfoIcon css={styles.icon} />
       </HelpTooltipTrigger>
@@ -113,14 +113,6 @@ const styles = {
     color: theme.experimental.roles.notice.outline,
   }),
 
-  button: css`
-    opacity: 1;
-
-    &:hover {
-      opacity: 1;
-    }
-  `,
-
   container: {
     display: "flex",
     flexDirection: "column",
diff --git a/site/src/pages/WorkspacePage/WorkspaceStats.tsx b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
index 923f9aa44facb..866c26da71809 100644
--- a/site/src/pages/WorkspacePage/WorkspaceStats.tsx
+++ b/site/src/pages/WorkspacePage/WorkspaceStats.tsx
@@ -87,7 +87,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
           css={styles.statsItem}
           label="Version"
           value={
-            <>
+            <span css={{ display: "flex", alignItems: "center", gap: 4 }}>
               <Link
                 component={RouterLink}
                 to={`/templates/${workspace.template_name}/versions/${workspace.latest_build.template_version_name}`}
@@ -103,7 +103,7 @@ export const WorkspaceStats: FC<WorkspaceStatsProps> = ({
                   ariaLabel="update version"
                 />
               )}
-            </>
+            </span>
           }
         />
 
diff --git a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
index 4e1dfa099d6ff..afe6372b16042 100644
--- a/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
+++ b/site/src/pages/WorkspacesPage/WorkspacesTable.tsx
@@ -146,7 +146,7 @@ export const WorkspacesTable: FC<WorkspacesTableProps> = ({
                         title={
                           <Stack
                             direction="row"
-                            spacing={0}
+                            spacing={0.5}
                             alignItems="center"
                           >
                             {workspace.name}