DEV: supports tooltips in form kit (#31065)

Usage:

```javascript
// with a string
<Form as |form|>
  <form.Field @name="foo" @title="Foo" @tooltip="text" as |field|>
    <field.Input />
  </form.Field>
</Form>

// with a DTooltip component
<Form as |form|>
  <form.Field @name="foo" @title="Foo" @tooltip={{component DTooltip content="component"}} as |field|>
    <field.Input />
  </form.Field>
</Form>
```

app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs

@@ -7,6 +7,7 @@ import FKMeta from "discourse/form-kit/components/fk/meta";
 import FKText from "discourse/form-kit/components/fk/text";
 import concatClass from "discourse/helpers/concat-class";
 import { i18n } from "discourse-i18n";
+import DTooltip from "float-kit/components/d-tooltip";
 
 export default class FKControlWrapper extends Component {
   get controlType() {
@@ -21,6 +22,10 @@ export default class FKControlWrapper extends Component {
     return (this.args.errors ?? {})[this.args.field.name];
   }
 
+  get isComponentTooltip() {
+    return typeof this.args.field.tooltip === "object";
+  }
+
   normalizeName(name) {
     return name.replace(/\./g, "-");
   }
@@ -50,6 +55,14 @@ export default class FKControlWrapper extends Component {
                 "form_kit.optional"
               }})</span>
           {{/unless}}
+
+          {{#if @field.tooltip}}
+            {{#if this.isComponentTooltip}}
+              <@field.tooltip />
+            {{else}}
+              <DTooltip @icon="circle-question" @content={{@field.tooltip}} />
+            {{/if}}
+          {{/if}}
         </FKLabel>
       {{/if}}
 

app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs

@@ -96,6 +96,14 @@ export default class FKFieldData extends Component {
     return this.args.format;
   }
 
+  /**
+   * Tooltip component of the field.
+   * @type {string|Component}
+   */
+  get tooltip() {
+    return this.args.tooltip;
+  }
+
   /**
    * Indicates whether the field is disabled.
    * Defaults to `false`.

app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs

@@ -46,6 +46,7 @@ export default class FKField extends Component {
       @data={{@data}}
       @triggerRevalidationFor={{@triggerRevalidationFor}}
       @title={{@title}}
+      @tooltip={{@tooltip}}
       @description={{@description}}
       @showTitle={{@showTitle}}
       @collectionIndex={{@collectionIndex}}

app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs

@@ -12,6 +12,7 @@ import sinon from "sinon";
 import Form from "discourse/components/form";
 import { setupRenderingTest } from "discourse/tests/helpers/component-test";
 import formKit from "discourse/tests/helpers/form-kit-helper";
+import DTooltip from "float-kit/components/d-tooltip";
 
 module("Integration | Component | FormKit | Field", function (hooks) {
   setupRenderingTest(hooks);
@@ -215,4 +216,35 @@ module("Integration | Component | FormKit | Field", function (hooks) {
 
     await fillIn("input", "bar");
   });
+
+  test("@tooltip", async function (assert) {
+    await render(<template>
+      <Form as |form|>
+        <form.Field @name="foo" @title="Foo" @tooltip="text" as |field|>
+          <field.Input />
+        </form.Field>
+      </Form>
+    </template>);
+
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__inner-content").hasText("text");
+
+    await render(<template>
+      <Form as |form|>
+        <form.Field
+          @name="foo"
+          @title="Foo"
+          @tooltip={{component DTooltip content="component"}}
+          as |field|
+        >
+          <field.Input />
+        </form.Field>
+      </Form>
+    </template>);
+
+    await click(".fk-d-tooltip__trigger");
+
+    assert.dom(".fk-d-tooltip__inner-content").hasText("component");
+  });
 });