fix: Deprecate options.tooltip

src/controls/TextControl.test.tsx

@@ -130,3 +130,49 @@
 
   await screen.findByText("Only letters are allowed")
 })
+
+test("renders tooltips", async () => {
+  const uischema = {
+    type: "VerticalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/name",
+        label: "Name",
+        options: {
+          formItemProps: {
+            tooltip: {
+              title: (
+                <p>
+                  Choose{" "}
+                  <a
+                    href="https://wheelofnames.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    a random name
+                  </a>
+                  .
+                </p>
+              ),
+              placement: "right",
+            },
+          },
+        },
+      },
+    ],
+  }
+  const schema = {
+    type: "object",
+    properties: { name: { type: "string", title: "Name" } },
+  } satisfies JSONSchema
+
+  render({ schema, uischema })
+  await screen.findByPlaceholderText(schema.properties.name.title, {
+    exact: false,
+  })
+  const svgEl = screen.getByRole("img", { name: /question-circle/i })
+  await userEvent.hover(svgEl)
+
+  await screen.findByText("a random name", { exact: false })
+})

src/controls/TextControl.tsx

@@ -1,7 +1,7 @@
 import type { ChangeEvent } from "react"
 import { useCallback, useEffect } from "react"
 import { Input, Form, InputProps } from "antd"
-import type { Rule } from "antd/es/form"
+import type { FormItemProps, Rule } from "antd/es/form"
 import type {
   ControlElement,
   ControlProps as JSFControlProps,
@@ -11,6 +11,7 @@ import type { ControlUISchema, TextControlOptions } from "../ui-schema"
 import { assertNever } from "../common/assert-never"
 import { withJsonFormsControlProps } from "@jsonforms/react"
 import { TextAreaProps } from "antd/es/input/TextArea"
+
 type ControlProps = Omit<JSFControlProps, "uischema"> & {
   data: string
   handleChange(path: string, value: string): void
@@ -44,7 +45,9 @@ export function TextControl({
     (uischema.options as TextControlOptions) ?? {}
   const formItemProps =
     "formItemProps" in uischema ? uischema.formItemProps : {}
-  const tooltip = options.tooltip ? options.tooltip : formItemProps?.tooltip
+  const { tooltip, ...formItemPropsWOTooltip } = formItemProps as FormItemProps
+  const mergedTooltip = options.tooltip ? options.tooltip : tooltip ?? ""
+
   const placeholderText = options.placeholderText
   const form = Form.useFormInstance()
   const rules: Rule[] = [
@@ -64,10 +67,10 @@ export function TextControl({
       label={label}
       id={id}
       name={path}
-      rules={rules}
       validateTrigger={["onBlur"]}
-      tooltip={tooltip}
-      {...formItemProps}
+      rules={rules}
+      tooltip={mergedTooltip}
+      {...formItemPropsWOTooltip}
     >
       <TextControlInput
         aria-label={ariaLabel}

src/stories/controls/TextControl.stories.tsx

@@ -125,7 +125,7 @@ export const RuleDefinedInUISchema: Story = {
   },
 }
 
-export const Tooltip: Story = {
+export const FormItemTooltip: Story = {
   parameters: { controls: { expanded: true } },
   tags: ["autodocs"],
   args: {
@@ -137,7 +137,24 @@ export const Tooltip: Story = {
           type: "Control",
           scope: "#/properties/name",
           label: "Name",
-          formItemProps: { tooltip: "It's what you call yourself" },
+          formItemProps: {
+            tooltip: {
+              title: (
+                <p>
+                  Choose{" "}
+                  <a
+                    href="https://wheelofnames.com/"
+                    target="_blank"
+                    rel="noopener noreferrer"
+                  >
+                    a random name
+                  </a>
+                  .
+                </p>
+              ),
+              placement: "right",
+            },
+          },
         },
       ],
     } satisfies UISchema<typeof schema>,

src/ui-schema.ts

@@ -155,6 +155,9 @@ export type AnyOfControlOptions = OneOfControlOptions
 export type TextControlType = "multiline" | "password" | "singleline"
 
 export type TextControlOptions = {
+  /**
+   * @deprecated Please use formItemProps.tooltip instead
+   */
   tooltip?: string
   placeholderText?: string
   required?: boolean