diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
index 07681c888ec..ca93c6ebb54 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/control-wrapper.gjs
+++ b/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"
}})
{{/unless}}
+
+ {{#if @field.tooltip}}
+ {{#if this.isComponentTooltip}}
+ <@field.tooltip />
+ {{else}}
+
+ {{/if}}
+ {{/if}}
{{/if}}
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
index 7a3be6c168b..bccb1c67c7b 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field-data.gjs
+++ b/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`.
diff --git a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs b/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
index 575dd005c1a..c833b33b3ec 100644
--- a/app/assets/javascripts/discourse/app/form-kit/components/fk/field.gjs
+++ b/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}}
diff --git a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs b/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
index 55bc62cdc61..9ac4aec4323 100644
--- a/app/assets/javascripts/discourse/tests/integration/components/form-kit/field-test.gjs
+++ b/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(
+
+
+
+
+ );
+
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__inner-content").hasText("text");
+
+ await render(
+
+
+
+
+ );
+
+ await click(".fk-d-tooltip__trigger");
+
+ assert.dom(".fk-d-tooltip__inner-content").hasText("component");
+ });
});