The problem I'm encountering is whether to show the tooltip icon only when the input element is in focus, or to show it to the side at all times. The issue with the latter is that it is hard to relate the icon to its corresponding form element when dealing with larger forms - ie: it'd be easier to associate if the icon was closer to the label itself, unlike in the screenshot attached. Any insights would be appreciated.
Depending on the size (and the purpose) of the tooltip I usually place any relevant helpful info right below the input element.
If I am trying to provide information about proper input rules (e.g password fields) I make sure the info is always visible and under the correct input.
This helps with a couple of things:
1) The user doesn't have to click on the input to see the helpful information. If from the start I inform her that "Password needs to be at least 8 characters long and include symbols and numbers" then the user is prepared to use an appropriate password reducing the chances of failing the form completion and decreasing conversion rates.
2) It makes it easier for responsive design. "Floating" tooltips tend to be quite precarious with their placement in different views, especially mobile devices where there is not enough space. If the information naturally sits below (and you can still make it look like a tooltip) then applying responsive rules to the form (even retroactively) tends to be easier.
Here is an examples straight from the Material Design guidelines
P.S I follow the same rules with inline validation (i.e informing the user if the info they provided is correct or not)
Tooltips are text labels that appear when the user hovers over, focuses on, or touches an element.
Tooltips identify an element when they are activated. They may contain brief helper text about its function. For example, they may contain text information about actionable icons.
If you show it to the side all the time -
- You are going against users mental model.
- It will be unwanted content for users who are familiar with the form/field.
- You might force all users to read it even if they don't want to.
- It will make the UI look complicated, and unnecessarily add confusion.
- It makes the task difficult to complete.
I misread the icon part in your question.
Place the icon next to label and keep it visible at all time.