Founding price: $35, then $99 after 23:59 UTC on 4 November, then $99
Get ProAn input with a help button beside its label whose tooltip text is also linked to the field with aria-describedby, so no one needs a tooltip to complete the form.
Derived from this item’s props table, because it declares no controls of its own. This item has no standalone playground, so changes update the code, the share link and the AI prompt.
Use this for fields that need a sentence of explanation people will not always read: secrets, IDs, formats.
Do not put required rules (length, format) only in the tooltip. Show those as visible hint text under the field.
This item is part of tealmac UI Pro
The source for this item installs with a Pro licence key. Log in with your key to see the install command, or read the Pro setup page.
| Prop | Type | Default | Description |
|---|---|---|---|
label | string | - | Visible label. |
help | string | - | Help text for the tooltip and the description. |
...input props | Input props | - | Passed to the input. |
aria-describedby, so screen readers read it on the field.About {label} and is in the tab order, so keyboard users can open the tooltip.| Key | Action |
|---|---|
| Tab | the help button, then the field |
| Escape | closes the tooltip |
The pattern ships a Testing Library test (tooltip-field-help.test.tsx) that covers the description link, the focusable help button and the tooltip with Escape.