I believe this question is quite similar to What are the best practices for tooltips on mobile websites?, but this question is more specific (only focus on form fields) and to go deeper in how to show the same information in desktop and mobile version.

I'm thinking of a solution similar to this jQuery example: enter image description here

But this solution doesn't fit into mobile devices. And probably this is not a good solution for desktop version.

So my first question is: Is this a good way to show extra information on form fields?

If so, what is the best way to make it compatible with mobile devices?

Thanks a lot!

  • Use tool tips instead. whenever user focuses on any input show tool tip. position tool tip be below form input avoid the current position hence it will look ok in mobile also.
    – prazor9
    Feb 13, 2017 at 10:37
  • Thank you @prazor9 for your response. Do yo think the best position is below inputs? Thinking in mobile devices, I do not know if this position on this devices could hide and could be a little annoying. Feb 14, 2017 at 11:36

1 Answer 1


I believe a good answer to this is on this article https://www.nngroup.com/articles/form-design-placeholders/ and using this solution:

enter image description here

Basically you add an hint directly below the label, where clear indication is given to the user and no additional scripting is added.

  • Thank you very much @joao-carvalho for your response. I think is the best cross-compatible solution and probably the cleanest. Feb 14, 2017 at 11:28
  • However, imagines you need to put a tooltip, because is a must of the application, do you think is a good solution to put next to the field and to open this tooltip you press it (with the mouse pointer or touching it in a mobile device) and press it once again to close? Feb 14, 2017 at 11:32
  • @MiguelÁngelGarcíaGómez when is a tooltip a "must of the application"? Can you share an example? Feb 14, 2017 at 12:00
  • Oh sorry, I'll try to explain myself. What I'm saying with "must of the application" is a requirement from the customer. In the question there is an edit showing this new situation. Feb 14, 2017 at 12:31
  • As my reputation is not enough to put more links on the original question, I put here: Another approach is using a tooltip nex to header of form, something similar to this: i68.tinypic.com/o6i650.jpg Feb 14, 2017 at 12:43

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.