Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Revisit tooltip pattern on form fields #568

Open
jaepass opened this issue Nov 23, 2021 · 1 comment
Open

Revisit tooltip pattern on form fields #568

jaepass opened this issue Nov 23, 2021 · 1 comment
Labels
enhancement New feature or request

Comments

@jaepass
Copy link
Contributor

jaepass commented Nov 23, 2021

Context https://madebychec.slack.com/archives/C0259UZ4Q/p1637691001003700

There's been quite a few discussions that have come up in the past around how we're utilizing tooltips and whether they're necessary for input fields. The pattern we currently have and are using have either a label appended or just have the '?' icon. Both aren't really accessible and also looks a bit jarring when they're used in a lot of fields that are the same container. We have a few options to consider if we want to rethink this:

  • Completely remove the usage for tooltips on form fields and make labels and placeholders more apparent
  • Use helper texts but sparingly under form fields (like the ones we have in the Rays template builder)
  • Keep tooltips on on form fields but make them pop up on form wrapper hover

Task will include redesign and reimplementation on form fields that are currently using tooltips

Discuss please!

@jaepass jaepass added the enhancement New feature or request label Nov 23, 2021
@ScopeyNZ
Copy link
Contributor

My preference is that we do the first two bullet points.

  • Remove the tooltips, maybe we might find a situation where we want to provide information that's not completely relevant to inform the user what they should enter (something like "this is used to provide x", just additional notes, not what the data should be).
  • Add helper text like Rays. I think this looks pretty good and we can make it work. It would prevent layout shift from errors too - but we'll need to play around with the looks a little on some of our bigger forms (eg. edit product)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
enhancement New feature or request
Projects
None yet
Development

No branches or pull requests

2 participants