👋🏽 We wrote a book! Order Wireframing for Everyone today →

Balsamiq

Toggle navigation

Tooltip and Popover Guidelines

Tooltips and popovers are different types of small callouts that help the user complete a task or learn more.

Applies to:
Tooltip
Popover
Help Button

Interactions

Depending on the situation, tooltips may be opened and closed in different ways.

Revealing actions

A tooltip can appear when the user clicks an icon or text, hovers over something, or loads a new page.

The hover-on action will happen when the user hovers over something with a tooltip. For example, hovering over a button may display a tooltip prompt. For hover-on tooltips, it’s recommended to hide them with a hover-off.

The on click open action will happen when the user clicks on something expecting a tooltip to appear. For example, this could be when a user clicks on a help button or a misspelled word in spell check.

The on page load action will happen without action from the user. In this case, the tooltip or popover will appear as soon as the user’s page has loaded.

Hiding actions

A tooltip can disappear when the user hovers off, clicks close, or clicks away.

The hover-off action will only be used on tooltips that appear on hover. For these types, you don’t need to add a close icon.

The on click close action will only happen if the user clicks on the close icon.

The click away action will happen when the user clicks somewhere else on the page. An example of this is a spellchecker tooltip that will disappear when you click somewhere else on the page.


Uses

Tooltips and popovers have many uses, from welcome tours to helpful hints and prompts.

Tours

When a user first uses a new product, they will often get a product tour. The standard pattern is to use a popover with instructions. These instructions should be short and to the point. The user should be able to see how many steps are in the tour, where to click to see the next step, and how to end the tour at any time.

It is standard practice to have a full-screen overlay so that the user’s attention can be on the link or button being introduced.

This tour will show the user around and let them know what to click on to get started. It is best practice to only have 3 to 5 steps in a product tour.

Help

When filling out a form or interacting with something new, a user may need more context about completing or fulfilling an action. This is where the help button comes in.

The help button is a small button with a question mark in the center. When the user clicks on it, a popover should appear, giving the user more information or context. A good help popover should give the user just the right amount of information without confusing them.

Hover description

Hovering over buttons or links may bring up a tooltip describing what the action will do. If the button is an icon without text, the tooltip will usually just be the button label. In instances where the button has a label, the hover tooltip description may be a call to action or provide more information.

Hint

When filling out a form or completing a task, the system may give users advice or tips about how to improve. The classic example is text editors’ spellcheckers.

Spellcheckers will suggest which words are potentially misspelled and underline them. Then, when the user clicks on the word, a tooltip will appear, showing the word with the correct spelling.

Prompt

When a user loads a page with a form on it, a prompt may appear, encouraging them to fill out the first field. These prompts are used to give the user more information and encourage them to complete the form.

Prompt text can be instructive, e.g., “Enter first name.” It can also give an example, e.g., “Jane.”

Alerts

If a user doesn’t complete a form, they may get shown an error state with a tooltip prompting them to complete the empty or incorrect field.

Describe

Websites that offer text-based educational content may include descriptive tooltips defining certain words. These tooltips will usually be used like glossary definitions.


Controls included in Balsamiq

Balsamiq offers a range of pre-made controls. Use the ‘Quick add’ tool to find the one you need, then drop it directly into your wireframe.

Help button: When clicked, the help button will either bring up a tooltip or take the user to a help page.

Tooltip: A tooltip is used to give the user hints or help them to complete an action.

Popover: A popover is used to give the user more detail about how to complete an action.


By Tess Gadd
Got questions or feedback? Email learn@balsamiq.com.