I am inserting about what is the best way to show help in form inputs. This is what I am doing in my site:


download bmml source – Wireframes created with Balsamiq Mockups

I have a question mark symbol, and when the mouse hover the popover may show.

But what should I do in mobile platforms? The popover may be outside of the phone viewport, or even over the input itself like:


download bmml source

So what is the best practice to show form input helpers in mobile platform?

  • 3
    Personally speaking, I only use such tooltips in forms to explain what the field label means. If I need to supply hints or information about what to put in that field I would print actual text on the page (below or alongside the field).
    – JonW
    Jun 7, 2016 at 13:36
  • No, the tooltip/popover is only for explain what the field label means. But it can be long explanation or multi-lines
    – nrofis
    Jun 7, 2016 at 13:43
  • I think there is no space in mobile UI for long explanations. Maybe the help could be at the bottom of the input form and it should be expandable, in order to read the whole thing. Jun 7, 2016 at 14:06
  • Long I mean at most 3 lines, no more than that. But at the bottom of the input, the user may miss this and mabey not understand what it means
    – nrofis
    Jun 7, 2016 at 14:09

2 Answers 2


It's always better if you keep the explanation right under the filed for both desktop and mobile. In case you need long explanation, you can always include a title for the helper line and link it to another page or a popup.

You'll get what I really mean by checking out this example from mailchimp. I use it and find it helpful.enter image description here

  • Can you please show me how should I do that on desktop version? If you said that its better then popover explanation, I would like to see an example.
    – nrofis
    Jun 7, 2016 at 15:48
  • it looks exactly the same @nrofis - they are using the same layout for both screens. Jun 8, 2016 at 7:09
  • I saw in their desktop website (registration and login forms) that they did that the helpers shows only when the relevant input getting focus. Is a good UX or it should be displayed always?
    – nrofis
    Jun 8, 2016 at 7:58
  • What about select element? I can't show help below the element on desktop or mobile, so what is the best way to do that for it?
    – nrofis
    Jun 8, 2016 at 9:26
  • Guess I answered that right? Jun 8, 2016 at 9:36

enter image description here

I def. recommend this option for the desktop version but not for mobile. Look at the attached image, the window gets really tiny whenever you attempt to input text into the field.

  • So on mobile it's better to see the helpers constantly? and not triggers by focus?
    – nrofis
    Jun 8, 2016 at 8:08
  • yes i would recommend you do this and test as you go :) Jun 8, 2016 at 8:08
  • Thanks! I also think that is a good idea. I hate moving form in mobile, especially if the keyboard is open... :)
    – nrofis
    Jun 8, 2016 at 8:14
  • What about select element? I can't show help below the element on desktop or mobile, so what is the best way to do that for it?
    – nrofis
    Jun 8, 2016 at 9:04
  • use the same technique but right under the lablel: - in case of one sentence, keep the helper between the label and the select element - in case of long helper, use a link do you think this could work for you? Jun 8, 2016 at 9:27

Your Answer

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

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