forms - Field focused tooltip vs. clickable information icon

I'm building a public website and I need to display helpful information to guide the user when filling in forms. The forms may contain text inputs, dropdown lists, sliders... The site will be mobile compatible.

I have thought of 2 ways to display the tooltip:

• 
  

  The tooltip is displayed when the user focuses on the field
  Pros: does not clutter UI
  Cons: Users might miss it if they don't click in the field, and just leave the page.
  Information is always shown when field is focused, user might not need it.

  
  


• 
  

  The tooltip is displayed when the user clicks a "?" icon
  
  Pros: Information shown only when needed.
  User will easily find help
  Cons: Clutters UI
  Usually, "?" icons are not clickable

  
  

What would be the best practice here ?

Answer

It depends on how often you expect help to be needed.

• 
  

  A clickable ? icon is a good way to go if the answer will usually be clear without any explanation, but help might be needed occasionally. It is easily accessible, but doesn't get in the way for the majority of users who don't need it.

  
  

  I have seen plenty of sites use this paradigm, and it generally is quite clear. The key is to use styling to show that the ? is clickable. Often it looks like a small, round button.

  
  


• 
  

  If there is an explanation that will always be needed in order to complete the form, you should have that appear when the field is highlighted, or even always be visible on the page.

  
  

  One example of this I have seen is passwords that must meet certain strength requirements (must contain special characters, be at least 12 chars long, etc.). Users can't be expected to know your custom rules, so it must be shown. Either rules are displayed statically on the page, or Javascript is used to dynamically validate the password and indicate what is missing.

  
  

Pick what seems most appropriate for your situation.