Helpers in form

Question

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?

Answer 1

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.

Answer 2

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.