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

**URL:** https://meta.discourse.org/t/form-toolkit-cant-get-tooltip-to-work-with-component-as-described-in-doc-topic-or-in-tests/366561
**Category:** Development
**Created:** [May 17, 2025, 4:59pm UTC](https://meta.discourse.org/t/form-toolkit-cant-get-tooltip-to-work-with-component-as-described-in-doc-topic-or-in-tests/366561 "2025-05-17T16:59:12Z")
**Posts on this page:** 3
**Page:** 1

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 17, 2025, 4:59pm UTC](https://meta.discourse.org/t/form-toolkit-cant-get-tooltip-to-work-with-component-as-described-in-doc-topic-or-in-tests/366561/1 "2025-05-17T16:59:12Z")

</div>

Continuing the discussion from [Discourse toolkit to render forms](https://meta.discourse.org/t/discourse-toolkit-to-render-forms/326439/32):

> [@Discourse toolkit to render forms](https://meta.discourse.org/t/discourse-toolkit-to-render-forms/326439/1):
>
> ```plaintext
> <form.Field
> @name="foo"
> @title="Foo"
> @tooltip={{component DTooltip content="a nice input"}}
> as |field|
> >
> 
> ```

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

```plaintext
            @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):

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

```

---

<div class="post-metadata">

### Author: ![Arkshine](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/arkshine/32/298682_2.png) [@Arkshine](https://meta.discourse.org/u/Arkshine)
#### Post date: [May 19, 2025, 2:47am UTC](https://meta.discourse.org/t/form-toolkit-cant-get-tooltip-to-work-with-component-as-described-in-doc-topic-or-in-tests/366561/2 "2025-05-19T02:47:47Z")

</div>

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:

```js
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](https://global.discourse-cdn.com/meta/original/4X/3/5/f/35f583c312d32e3ee5abc1f1b4531087df9d08bc.png)

---

<div class="post-metadata">

### Author: ![pfaffman](https://sea3.discourse-cdn.com/meta/user_avatar/meta.discourse.org/pfaffman/32/120154_2.png) [@pfaffman](https://meta.discourse.org/u/pfaffman)
#### Post date: [May 20, 2025, 10:29pm UTC](https://meta.discourse.org/t/form-toolkit-cant-get-tooltip-to-work-with-component-as-described-in-doc-topic-or-in-tests/366561/3 "2025-05-20T22:29:33Z")

</div>

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

```plaintext
  @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.