Ride-The-Lightning / RTL-Design

Ride The Lightning - A full function web browser app for LND and C-Lightning.
MIT License
12 stars 4 forks source link

Tooltip on inputbox #40

Closed ShahanaFarooqui closed 2 years ago

ShahanaFarooqui commented 4 years ago

We want to add some detailed expalination on one of the inputs for loop-out like below screen. Is it ok to add tooltip directly on the input hover?

image

swedishfrenchpress commented 3 years ago

Hey @ShahanaFarooqui, happy to chime in here. In general is it not good practice to introduce a tooltip directly on an input field. It's considered a better practice to hover over an icon indicating that there is more information that is NOT vital to task completion. Per NNgroup:

Users shouldn’t need to find a tooltip in order to complete their task. Tooltips are best when they provide additional explanation for a form field unfamiliar to some users or reasoning for what may seem like an unusual request. Remember that tooltips disappear, so instructions or other directly actionable information, like field requirements, shouldn’t be in a tooltip. (If it is, people will have to commit it to their working memory in order to be able to act upon it.)

In the example above, if the info is not vital then we could add it to a tooltip. However, we should if possible make it brief. It's quite wordy now and risks adding information saturation. I would purpose handling tooltips in a manner similar to this: image

Open to feedback on the copy and tooltip design but I think we should aim to have some type of tooltip design standardised across the project.

Resource: https://www.nngroup.com/articles/tooltip-guidelines/

ShahanaFarooqui commented 2 years ago

@swedishfrenchpress Thank you for the advice. Tooltips updated with PR #928. Closing this issue as well.