Form toolkit -- can't get tooltip to work with component as described in doc topic or in tests

Development

AI-generated summary

The discussion is about issues with getting tooltips to work with components in the Discourse form toolkit. pfaffman initially tried using a component as described in the documentation, but it didn’t render. Arkshine suggested returning a <DTooltip> component, but pfaffman found that the @tooltip attribute only accepts a string. To resolve the issue, pfaffman created a function that returns a translated string using i18n and passed it to the @tooltip attribute. This suggests that the documentation may be incorrect, and the @tooltip attribute only supports strings, not components.

1

Continuing the discussion from Discourse toolkit to render forms:

I can’t get this to work. It just refuses to render a tooltip. I copied the exact

            @tooltip={{component DTooltip content="component"}}

that’s in the form-kit test. If I use a component then no tooltip renders.

I can’t find an example of a component being used in core or in all-the-plugins, so, it looks like it’s impossible to use i18n with a tooltip in a form? (I was hoping that maybe I could just not figure this out)

I tried both of these imports, the latter from the test (why are there two? Maybe it’s two ways to call the same file? I see only on in core):

// import DTooltip from "discourse/components/d-tooltip";
import DTooltip from "float-kit/components/d-tooltip";
2

Indeed, the test and documentation are a bit confusing.

Looking at the code, you just have to return a component.
For example, this works for me:

const tooltip = <template>
    <DTooltip @icon="circle-question" @content="test" />
</template>

<form.Field
    @name="username"
    @title="Username"
    @validation="required"
    @tooltip={{tooltip}}
    as |field|
>
    <field.Input />
</form.Field>

image

3

When I do something like that, the tooltip is just added to the field name.

@tooltip just wants a string. Once I realized that, I just made a function that returns a string like

  @action
  tooltipText(field) {
    return i18n("pfaffmanager.help." + field + "_tooltip");
  }
...
               <form.Field
              @name="install_type"
              @format="large"
              @translatedLabel="bananas are delicious"
              @validation="required"
              @tooltip={{this.tooltipText "install_type"}}
              @class="install-field"
              @title="Install Type"
              {{! @description="description." }}
              as |field|
            >
              <field.Select
                {{on "focus" (fn this.fieldClicked "install_type")}}
                as |select|
              >

This seems like another case where the documentation is just wrong.