Are there any standards on when to use placeholder text vs. tooltips?

Question

To assist an user entering some data in an <input> field, we're planning to provide tooltips and placeholder. Wanted to understand the guidelines and standards on 'when' to use placeholder vs. tooltips. And in general, how does placeholder or tooltip provide better assistance than label and some sort of help. Any examples and explanation will be helpful.

Answer 1

When you use placeholder, the piece of information, help or example it is trying to relay to the user, is hidden from the moment a user types something. To reveal the info, user has to clear the field (e.g. cutting the text to clipboard, to be pasted back after reading). I'm even tempted to say that most users won't be able to figure out a way to get the placeholder text back, but I have no evidence of that.

In that sense, preferring a tooltip over placeholder is advised as the tooltip text can be viewed at any moment, without having to alter the text already typed in. However, a tooltip requires an explicit action (mouse hover, input focus) to reveal its contents while a label is always visible.

So, one has to consider the aspects of label vs. tooltip; usefulness, length, etc. In my (not so humble) opinion, use placeholder sparingly, and use meaningful labels instead. If some field needs a longer explanation or example, provide a tooltip for them.

Answer 2

Placeholder text is useful to show a single example of the kind of input you want. The best example I can think of is dates, because there are many ways to express date. Your placeholder text can easily show yyyy/mm/dd and give a hint about the type of input desired. However, the placeholder text will vanish at some point, so it's OK for a hint, but not instructions.

Tooltips are not as restricted by size and shape as placeholder text, and they can be used for more elaborate instruction or information. For instance, where you might have had an example of how to format a datestamp as your hint, you tooltip can say, "Please enter a date in yyyy/mm/dd format. You can also enter N/A or leave the field blank." You need to provide a hint to the user so they know where to place the mouse to display the tooltip or at least use a standard location.

Where tooltips and placeholders tell you what you are expected to put into an input, the label tells you what the input is. Is it a birthdate? A start date? Deadline, etc? The label should be short and clearly state what the data represents.

A quick note about labels vs placeholders - if you can't think of a more descriptive or useful placeholder than the label, don't use one. It's not helpful to label a field "First Name" and then give it a placeholder of "first name". A label of "Birthday" and a placeholder of "yyyy/mm/dd" makes sense because the placeholder tells you something new.

Answer 3

Are there Standards? No, but there are best practices* for each based on their intrinsic properties. I'll list a few that come to mind. Two good, 1 bad.

Placeholders:

Are good when space is an issue since they combine meta information about the input inside the input element itself.

Add extra usefulness when the placeholder text hints at input structure such as (xxx)xxx-xxxx

Can confuse users into thinking the text is already filled in.

Tooltips

Also are good when space is an issue since they take meta information about the input outside the form structure. Thereby reducing clutter and preserving space for the relevant elements.

Are a good choice for supplying additional information about the input that is descriptive. E.g., "Phone num:[ ] tooltip:"We'll only call you if your order doesn't go through"

Don't work well in mobile environments and may distract users from their intended action.

* I let the best solution to a user task trump "best" practices. In fact, that's how they are arrived at.

Hope this helps.