Jun 17, 2022 · Jun 16, 2022 · Jun 16, 2022 · Jun 17, 2022
diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.stories.tsx
 const Template: Story<HelpTooltipProps> = (args) => (
  <HelpTooltip {...args}>
    <HelpTooltipTitle>What is a template?</HelpTooltipTitle>
    <HelpTooltipText>A template is a common configuration for your team`&apos;`s workspaces.</HelpTooltipText>
    <HelpTooltipText>A template is a common configuration for your team&apos;s workspaces.</HelpTooltipText>
    <HelpTooltipLinksGroup>
      <HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink>
      <HelpTooltipLink href="https://github.com/coder/coder/">Updating a template</HelpTooltipLink>
diff --git a/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx b/site/src/components/Tooltips/HelpTooltip/HelpTooltip.tsx
 import { makeStyles } from "@material-ui/core/styles"
 import HelpIcon from "@material-ui/icons/HelpOutline"
 import OpenInNewIcon from "@material-ui/icons/OpenInNew"
 import React, { createContext, useContext, useState } from "react"
 import React, { createContext, useContext,useRef,useState } from "react"
 import { Stack } from "../../Stack/Stack"

 type Icon = typeof HelpIcon

 export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size = "medium" }) => {
  const styles = useStyles({ size })
  const[anchorEl, setAnchorEl] = useState<HTMLButtonElement | null>(null)
 open = open ?? Boolean(anchorEl)
  const id =open ? "help-popover" : undefined
  constanchorRef = useRef<HTMLButtonElement>(null)
 const [isOpen, setIsOpen] = useState(!!open)
  const id =isOpen ? "help-popover" : undefined

  const onClose = () => {
 setAnchorEl(null)
 setIsOpen(false)
  }

  return (
    <>
      <button
        ref={anchorRef}
        aria-describedby={id}
        className={styles.button}
        onClick={(event) => {
          event.stopPropagation()
          setAnchorEl(event.currentTarget)
          setIsOpen(true)
        }}
        onMouseEnter={() => {
          setIsOpen(true)
        }}
      >
        <HelpIcon className={styles.icon} />
      </button>
      <Popover
        className={styles.popover}
        classes={{ paper: styles.popoverPaper }}
        id={id}
        open={open}
        anchorEl={anchorEl}
        open={isOpen}
        anchorEl={anchorRef.current}
        onClose={onClose}
        anchorOrigin={{
          vertical: "bottom",
          vertical: "top",
          horizontal: "left",
        }}
        PaperProps={{
          onMouseEnter: () => {
            setIsOpen(true)
          },
          onMouseLeave: () => {
            setIsOpen(false)
          },
        }}
      >
        <HelpTooltipContext.Provider value={{ open, onClose }}>{children}</HelpTooltipContext.Provider>
        <HelpTooltipContext.Provider value={{ open: isOpen, onClose }}>{children}</HelpTooltipContext.Provider>
      </Popover>
    </>
  )
    height: ({ size }: { size?: Size }) => theme.spacing(getIconSpacingFromSize(size)),
  },

  popover: {
    pointerEvents: "none",
  },

  popoverPaper: {
    marginTop: theme.spacing(0.5),
    width: theme.spacing(38),
    padding: theme.spacing(2.5),
    color: theme.palette.text.secondary,
    pointerEvents: "auto",
  },

  title: {
Original file line number	Diff line number	Diff line change
Expand Up		@@ -16,7 +16,7 @@ export default {
		const Template: Story<HelpTooltipProps> = (args) => (
		<HelpTooltip {...args}>
		<HelpTooltipTitle>What is a template?</HelpTooltipTitle>
		<HelpTooltipText>A template is a common configuration for your team`'`s workspaces.</HelpTooltipText>
		<HelpTooltipText>A template is a common configuration for your team's workspaces.</HelpTooltipText>
		<HelpTooltipLinksGroup>
		<HelpTooltipLink href="https://github.com/coder/coder/">Creating a template</HelpTooltipLink>
		<HelpTooltipLink href="https://github.com/coder/coder/">Updating a template</HelpTooltipLink>
Expand Down
Original file line number	Diff line number	Diff line change
Expand Up		@@ -3,7 +3,7 @@ import Popover from "@material-ui/core/Popover"
		import { makeStyles } from "@material-ui/core/styles"
		import HelpIcon from "@material-ui/icons/HelpOutline"
		import OpenInNewIcon from "@material-ui/icons/OpenInNew"
		import React, { createContext, useContext, useState } from "react"
		import React, { createContext, useContext,useRef,useState } from "react"
		import { Stack } from "../../Stack/Stack"

		type Icon = typeof HelpIcon
Expand All		@@ -29,31 +29,36 @@ const useHelpTooltip = () => {

		export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size = "medium" }) => {
		const styles = useStyles({ size })
		const[anchorEl, setAnchorEl] = useState<HTMLButtonElement \| null>(null)
		open = open ?? Boolean(anchorEl)
		const id =open ? "help-popover" : undefined
		constanchorRef = useRef<HTMLButtonElement>(null)
		const [isOpen, setIsOpen] = useState(!!open)
		const id =isOpen ? "help-popover" : undefined

		const onClose = () => {
		setAnchorEl(null)
		setIsOpen(false)
		}

		return (
		<>
		<button
		ref={anchorRef}
		aria-describedby={id}
		className={styles.button}
		onClick={(event) => {
		event.stopPropagation()
		setAnchorEl(event.currentTarget)
		setIsOpen(true)
		}}
		onMouseEnter={() => {
		setIsOpen(true)
		}}
		>
		<HelpIcon className={styles.icon} />
		</button>
		<Popover
		className={styles.popover}
		classes={{ paper: styles.popoverPaper }}
		id={id}
		open={open}
		anchorEl={anchorEl}
		open={isOpen}
		anchorEl={anchorRef.current}
		onClose={onClose}
		anchorOrigin={{
		vertical: "bottom",
Expand All		@@ -63,8 +68,16 @@ export const HelpTooltip: React.FC<HelpTooltipProps> = ({ children, open, size =
		vertical: "top",
		horizontal: "left",
		}}
		PaperProps={{
		onMouseEnter: () => {
		setIsOpen(true)
		},
		onMouseLeave: () => {
		setIsOpen(false)
		},
		}}
		>
		<HelpTooltipContext.Provider value={{ open, onClose }}>{children}</HelpTooltipContext.Provider>
		<HelpTooltipContext.Provider value={{ open: isOpen, onClose }}>{children}</HelpTooltipContext.Provider>
		</Popover>
		</>
		)
Expand DownExpand Up		@@ -166,11 +179,16 @@ const useStyles = makeStyles((theme) => ({
		height: ({ size }: { size?: Size }) => theme.spacing(getIconSpacingFromSize(size)),
		},

		popover: {
		pointerEvents: "none",
		},

		popoverPaper: {
		marginTop: theme.spacing(0.5),
		width: theme.spacing(38),
		padding: theme.spacing(2.5),
		color: theme.palette.text.secondary,
		pointerEvents: "auto",
		},

		title: {
Expand Down