fix: Deprecate options.tooltip

package.json

@@ -110,6 +110,7 @@
     "vitest": "^1.5.0"
   },
   "dependencies": {
+    "interweave": "^13.1.0",
     "lodash.isempty": "^4.4.0",
     "lodash.merge": "^4.6.2",
     "lodash.range": "^3.2.0",

src/controls/TextControl.test.tsx

@@ -130,3 +130,33 @@ test("renders error messages from rule validation", async () => {
 
   await screen.findByText("Only letters are allowed")
 })
+
+test("renders tooltips", async () => {
+  const uischema = {
+    type: "VerticalLayout",
+    elements: [
+      {
+        type: "Control",
+        scope: "#/properties/name",
+        label: "Name",
+        options: {
+          tooltip:
+            "Choose <a href='https://wheelofnames.com/' target='_blank' rel='noopener noreferrer'>a random name</a>.",
+        },
+      },
+    ],
+  }
+  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,16 +1,19 @@
 import type { ChangeEvent } from "react"
-import { useCallback, useEffect } from "react"
+import React, { 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,
 } from "@jsonforms/core"
+import { Interweave } from "interweave"
+import ReactDOMServer from "react-dom/server"
 
 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 +47,10 @@
     (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 tooltipProps = getTooltipProps(mergedTooltip)
+
   const placeholderText = options.placeholderText
   const form = Form.useFormInstance()
   const rules: Rule[] = [
@@ -64,10 +70,13 @@
       label={label}
       id={id}
       name={path}
-      rules={rules}
       validateTrigger={["onBlur"]}
-      tooltip={tooltip}
-      {...formItemProps}
+      rules={rules}
+      tooltip={{
+        title: <Interweave content={tooltipProps.title} />,
+        ...tooltipProps.rest,
+      }}
+      {...formItemPropsWOTooltip}
     >
       <TextControlInput
         aria-label={ariaLabel}
@@ -162,4 +171,19 @@
   return value.toString()
 }
 
+const getTooltipProps = (tooltip: string | FormItemProps["tooltip"]) => {
+  if (!tooltip) {
+    return { title: "", rest: null }
+  } else if (typeof tooltip === "string") {
+    return { title: tooltip, rest: null }
+  } else if (React.isValidElement(tooltip)) {
+    return { title: ReactDOMServer.renderToString(tooltip), rest: null }
+  } else if (typeof tooltip === "object" && "title" in tooltip) {
+    const { title, ...rest } = tooltip
+    return { title: String(title), rest }
+  } else {
+    return { title: String(tooltip), rest: null }
+  }
+}
+
 export const TextRenderer = withJsonFormsControlProps(TextControl)

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,34 @@ export const Tooltip: Story = {
           type: "Control",
           scope: "#/properties/name",
           label: "Name",
-          formItemProps: { tooltip: "It's what you call yourself" },
+          formItemProps: {
+            tooltip: {
+              title: "It's what you call <b>yourself</b>",
+              placement: "right",
+            },
+          },
+        },
+      ],
+    } satisfies UISchema<typeof schema>,
+  },
+}
+
+export const OptionsTooltip: Story = {
+  parameters: { controls: { expanded: true } },
+  tags: ["autodocs"],
+  args: {
+    jsonSchema: schema,
+    uiSchema: {
+      type: "VerticalLayout",
+      elements: [
+        {
+          type: "Control",
+          scope: "#/properties/name",
+          label: "Name",
+          options: {
+            tooltip:
+              "Choose <a href='https://wheelofnames.com/' target='_blank' rel='noopener noreferrer'>a random name</a>.",
+          },
         },
       ],
     } satisfies UISchema<typeof schema>,