[Text input]: Enhance Figma component to support tooltips as a variant option
hooper-ux opened this issue · comments
Detailed description
The text input component has an option to show a label, but there is no easy way to make that label into a tooltip. Rather than it being a simple text element, it would be good if the Tooltip component was embeded into the Text Input component.
What version of the Carbon Design System Kit are you using?
v11
Is this issue related to a specific component? If so please give the page, artboard, and layer/symbol name.
What did you expect to happen? What happened instead? What would you like to see changed?
I wanted to add a "definition tooltip" to the label on a Text Input component. However, since definition tooltips use a dotted underline and not a solid underline, it was not as simple as changing the text style. To add a dotted line under the text meant I had to detach the component. I would prefer the text label to have a variant control where I could choose between No tooltip, Definition Tooltip, and Icon Button tooltip.
What offering/product do you work on? Any pressing ship or release dates we should be aware of?
Envizi-SCI. No pressing deadline. This is more of an issue related to designer efficiency and improving the Figma component.
Additional information
It would be good to also consider this enhancement to all form elements (i.e. dropdown, text area, date picker, etc.)
Carbon Team can explore design variations to provide an option to have a tooltip within textinput and similar components. @hooper-ux It will be helpful if you could share specific usecases where you felt the need for a tooltip over and above the helpertext.
Thanks @benjamin-kurien. Here are a few scenarios:
- A complex form must be completed by a user who is new to the subject matter. This is a form that they will need to complete on a semi-regular basis, so over time they will become more familiar with the terms. The labels for the fields follow industry standard terms, but is technical jargon to the layperson. Many fields also require additional information about how to fill out the field and what is required. The helper text is useful for the instructional information, but it can get very long if it also must explain the meaning of the field label. Also, the meaning of the label is something that will become known over time and is less likely to be needed as the user familiarizes themselves with the form. A tooltip on the label provides the kind of transitory, on-demand information that is appropriate to a definition, but the helper text is better for more how-to instructional guidance.
- A table has many columns with column header labels that are acronymns or simplified versions to better fit the space. A tooltip on each one allows the more verbose version of the label to be available as needed.
- A form has many fields that require some definition. The goal is to make the form look as clean and approachable as possible. Having a lot of additional helper text on each field makes for a more visually busy / complex appearance. Definition tooltips are more subtle and discreet for information that is not needed every time.