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"); + }); });