ui-library icon indicating copy to clipboard operation
ui-library copied to clipboard

Revisit tooltip pattern on form fields

Open jaepass opened this issue 2 years ago • 1 comments

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 avatar Nov 23 '21 18:11 jaepass

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)

ScopeyNZ avatar Nov 23 '21 19:11 ScopeyNZ