Add an Info Icon for Props with a Tooltip.

e2e-tests/src/components/Banner.tsx

@@ -1,7 +1,10 @@
 import { HexColor } from "@yext/studio";
 
 export interface BannerProps {
-  /** banner's title */
+  /**
+   * @tooltip Banner's title
+   * @displayName Title
+   */
   title?: string;
   num?: number;
   bool?: boolean;

e2e-tests/tests/nested-props.spec.ts

@@ -4,7 +4,14 @@ import { studioTest } from "./infra/studioTest.js";
 studioTest("renders nested props", async ({ page, studioPage }) => {
   await studioPage.addElementSection.addComponent("Banner");
   await studioPage.componentTreeSection.setActiveElement("Banner");
-  await expect(page.getByTestId("EditorSidebar")).toHaveScreenshot({
-    maxDiffPixelRatio: 0.015,
-  });
+
+  const editorSidebar = page.getByTestId("EditorSidebar");
+  const expectScreenshot = async () =>
+    await expect(editorSidebar).toHaveScreenshot({
+      maxDiffPixelRatio: 0.015,
+    });
+  await expectScreenshot();
+
+  await editorSidebar.getByTestId("prop-tooltip").hover();
+  await expectScreenshot();
 });

e2e-tests/tsdoc.json

@@ -0,0 +1,13 @@
+{
+  "$schema": "https://developer.microsoft.com/json-schemas/tsdoc/v0/tsdoc.schema.json",
+  "tagDefinitions": [
+    {
+      "tagName": "@displayName",
+      "syntaxKind": "modifier"
+    },
+    {
+      "tagName": "@tooltip",
+      "syntaxKind": "modifier"
+    }
+  ]
+}

packages/studio-ui/src/components/PropEditor.tsx

@@ -6,12 +6,12 @@ import {
   PropValueKind,
   PropValueType,
 } from "@yext/studio-plugin";
-import { Tooltip } from "react-tooltip";
 import PropInput from "./PropInput";
 import useOnPropChange from "../hooks/useOnPropChange";
 import { v4 } from "uuid";
 import classNames from "classnames";
 import { useMemo } from "react";
+import TooltipIcon from "./common/TooltipIcon";
 
 interface PropEditorProps {
   propName: string;
@@ -22,8 +22,6 @@ interface PropEditorProps {
   isNested?: boolean;
 }
 
-const tooltipStyle = { backgroundColor: "black" };
-
 /**
  * Renders an input editor for a single prop of a component.
  */
@@ -38,7 +36,6 @@ export default function PropEditor({
   const { type, tooltip } = propMetadata;
   const onChange = useOnPropChange(propKind, propName, onPropChange, type);
   const uniqueId = useMemo(() => v4(), []);
-  const labelTooltipId = `${uniqueId}-label`;
   const inputId = `${uniqueId}-input`;
   const inputContainerClass = classNames({
     "ml-2": isNested,
@@ -48,9 +45,12 @@ export default function PropEditor({
     <div className="flex mb-2 text-sm grow flex-col">
       <div className="flex relative">
         {isNested && renderBranchUI()}
-        <label className="pb-1" id={labelTooltipId} htmlFor={inputId}>
-          {propName}
-        </label>
+        <div className="flex flex-row">
+          <label className="pb-1" htmlFor={inputId}>
+            {propName}
+          </label>
+          {tooltip && <TooltipIcon content={tooltip} />}
+        </div>
       </div>
       <div className={inputContainerClass}>
         <PropInput
@@ -66,14 +66,6 @@ export default function PropEditor({
           }}
         />
       </div>
-      {tooltip && (
-        <Tooltip
-          style={tooltipStyle}
-          anchorId={labelTooltipId}
-          content={tooltip}
-          place="left"
-        />
-      )}
     </div>
   );
 }

packages/studio-ui/src/components/common/TooltipIcon.tsx

@@ -0,0 +1,24 @@
+import { useMemo } from "react";
+import { Tooltip } from "react-tooltip";
+import { v4 } from "uuid";
+import { ReactComponent as Info } from "../../icons/info.svg";
+
+export interface TooltipIconProps {
+  content: string;
+}
+
+export default function TooltipIcon({ content }: TooltipIconProps) {
+  const tooltipId = useMemo(() => v4(), []);
+
+  return (
+    <div>
+      <Info id={tooltipId} className="ml-3 pb-1" data-testid="prop-tooltip" />
+      <Tooltip
+        className="bg-black z-20"
+        anchorId={tooltipId}
+        content={content}
+        place="left"
+      />
+    </div>
+  );
+}