go back to a tooltip

aslilac · aslilac · commit 091a97d34927 · 2023-10-05T18:07:19.000Z
diff --git a/site/src/components/RichParameterInput/RichParameterInput.stories.tsx b/site/src/components/RichParameterInput/RichParameterInput.stories.tsx
@@ -113,19 +113,29 @@ export const OptionsWithDescriptions: Story = {
         {
           name: "First option",
           value: "first_option",
-          description: "This is option 1",
+          description: "This is a short description.",
           icon: "/icon/fedora.svg",
         },
         {
           name: "Second option",
           value: "second_option",
-          description: "This is option 2",
+          description:
+            "This description is a little bit longer, but still not very long.",
           icon: "/icon/database.svg",
         },
         {
           name: "Third option",
           value: "third_option",
-          description: "This is option 3",
+          description: `
+In this description, we will explore the various ways in which this description
+is a big long boy. We'll discuss such things as, lots of words wow it's long, and
+boy howdy that's a number of sentences that this description contains. By the conclusion
+of this essay, I hope to reveal to you, the reader, that this description is just an
+absolute chonker. Just way longer than it actually needs to be. Absolutely massive.
+Very big.
+
+> Wow, that description is straight up large. –Some guy, probably
+`,
           icon: "/icon/aws.png",
         },
       ],
diff --git a/site/src/components/RichParameterInput/RichParameterInput.tsx b/site/src/components/RichParameterInput/RichParameterInput.tsx
@@ -4,15 +4,16 @@ import RadioGroup from "@mui/material/RadioGroup";
 import { makeStyles } from "@mui/styles";
 import TextField, { TextFieldProps } from "@mui/material/TextField";
 import { Stack } from "components/Stack/Stack";
-import { FC } from "react";
+import { type FC } from "react";
 import { TemplateVersionParameter } from "api/typesGenerated";
 import { colors } from "theme/colors";
 import { MemoizedMarkdown } from "components/Markdown/Markdown";
 import { MultiTextField } from "./MultiTextField";
 import Box from "@mui/material/Box";
 import { Theme } from "@mui/material/styles";
-import { InfoTooltip } from "components/InfoTooltip/InfoTooltip";
 import { useTheme } from "@emotion/react";
+import Tooltip from "@mui/material/Tooltip";
+import InfoIcon from "@mui/icons-material/InfoOutlined";
 
 const isBoolean = (parameter: TemplateVersionParameter) => {
   return parameter.type === "bool";
@@ -162,10 +163,24 @@ const RichParameterField: React.FC<RichParameterInputProps> = ({
                     css={{ padding: `${theme.spacing(0.5)} 0` }}
                     direction={small ? "row" : "column"}
                   >
-                    <span>{option.name}</span>
-                    <MemoizedMarkdown className={styles.labelCaption}>
-                      {option.description}
-                    </MemoizedMarkdown>
+                    {small ? (
+                      <Tooltip
+                        title={
+                          <MemoizedMarkdown>
+                            {option.description}
+                          </MemoizedMarkdown>
+                        }
+                      >
+                        <Box>{option.name}</Box>
+                      </Tooltip>
+                    ) : (
+                      <>
+                        <span>{option.name}</span>
+                        <MemoizedMarkdown className={styles.labelCaption}>
+                          {option.description}
+                        </MemoizedMarkdown>
+                      </>
+                    )}
                   </Stack>
                 ) : (
                   option.name
