What interface element should you use to provide the user with helpful information about a form field?

If you were thinking a tooltip, you are correct. Tooltips are necessary for form fields that need more clarification than its field label can give.

For example, when the field label has an obscure term the user isn’t familiar with. Or, when you’re asking for information that’s more personal than normal and need to explain why it’s needed.

On desktop, tooltips are easy to display because the user has a mouse hover and ample screen space. This allows the user to trigger and read the tooltip with ease.

But on mobile, it’s more of a challenge because screen space is limited and there is no mouse hover. This begs the question of what the best way to display tooltips on a mobile form is.

Easy to Spot, Tap, and Read

A mobile tooltip must always be easy to spot, tap, and read. This will be determined by the appearance of the icon and how you position your tooltip.

Spotting and Tapping the Icon

Larger icons are easier to tap than smaller icons. Not only that, but they’re also easier to spot. This means the tooltip icon must be as large as it can be without breaking the form layout. An icon that’s too small will be harder for users to spot and tap.

The example below shows how placing the icon next to the label is not a good idea because it makes the icon too small. You could increase its size but that would break the form layout and its alignment with the label.

The best option is to place the icon inside the text field on the right. This allows the icon to span the height of the field, which is much taller than the field label. It’s also in a position where it won’t interfere with user input. The icon is now large enough to tap, but it’s still hard to spot due to its low contrast style.

Instead of using an outline icon, you should use a solid icon that looks and feels like a button. To strengthen its affordance more, give it a blue color that distinguishes it from all the other neutral colored form elements.

Now the tooltip icon is both easy to spot and tap. The next thing we have to determine is how the tooltip text will be displayed once it’s activated.

Reading the Tooltip Text

The tooltip text not only needs to be easy to read, but it should visually correlate with the field and its label.

To do this, use a tooltip balloon that spans the width of the text field. If you allow the tooltip to appear directly above the icon it could get cut off by the screen edge. It’s important the tooltip balloon matches the field width and is aligned with it so this doesn’t happen.

The tooltip balloon should be placed right above the field and label for a strong visual correlation. Users should be able to read the tooltip text and view the correlating field and label at the same time. The balloon tip should point to the icon to indicate what triggered the tooltip.

Once users are done reading the tooltip, they’ll tap the text field to type their input. Make the tooltip disappear when the user taps an area outside the balloon, allowing them to resume their task.

Use this tool called Balloon.css to add tooltips to your form in only a few lines of CSS without Javascript.

The Form Element Is the Visual Anchor

Notice that we used the height and width of the text field to determine the size and placement of the tooltip icon and balloon. This is because the text field is the largest and most important element that serves as the visual anchor for the tooltip.

Instead of picking the size and placement of the tooltip arbitrarily, we allow the text field to dictate it for us. This will create a strong visual correlation and uniformity between the tooltip and the text field.

Other Form Elements

You may be wondering how to display tooltips on other form elements such as dropdown lists, checkboxes and radio buttons. You would follow the same principle used for text fields and let the form element be the anchor for size and placement.

In the example above, you can see the tooltip icon is placed to the right of the dropdown list and is the same size as its height. This is so that it does not interfere with the option label but is still visible to users. The visual form of the dropdown list is dictating the size and placement of the tooltip icon.

The tooltip icon placement for radio buttons will be different than text fields and dropdown lists because they expand in different directions. Text fields and dropdown lists expand horizontally, but radio buttons expand vertically.

Therefore, we can’t place the tooltip icon at the bottom of the radio buttons because this would make it less visible to users. It needs to be placed at the top for high visibility.

We also can’t place the tooltip icon to the right of the radio buttons because it would interfere with the option labels. Placing the tooltip icon to the right of the text field and dropdown list was possible because it didn’t interfere with the user input or option label.

The tooltip icon conforms to the shape of the radio button for visual correlation and uniformity. At the same time, users can distinguish it from a radio button because of the question mark icon, help label, and unsaturated blue.

Even if users tapped the tooltip icon on accident, there would be no negative consequence to their action. They would only receive helpful information that helps them fill out the form.

The Purpose of Tooltips

Tooltips provide helpful information that can ease form field friction for users. But not all users need that information to fill out the form. The ones that do should be able to access it immediately when they need it. The ones that don’t should not have to read it.

Some designers may suggest an alternative to tooltips is to display the information below the field label. The problem with this is that it not only breaks the form layout, but it also steals user attention when it doesn’t need to.

When performing tasks, user attention is a finite resource. Stealing it can frustrate users and slow down their task performance. Tooltips should be displayed with deference and not invade screen space unless called upon by the user.

The lack of mouse hover and limitation in screen space is not a problem when we understand the purpose of tooltips. Tooltips are help. As such, they should be accessible and deferential to users. Don’t let it get in the user’s way, but don’t let it be out of arm’s reach either.

Toolkits