What Are Tooltips?

Tooltips, also known as hover text, are those little popups that appear when you hover your mouse over something on a website or app. They provide helpful information or context without cluttering up the user interface.

Types of Tooltips

There are a few common types of tooltips:

• Explanatory: Gives more details about a feature or option. For example, hovering over a settings icon may show "Customize app preferences".

• Instructional: Provides guidance for using a feature. For example, "Click and drag to move items between lists".

• Definitional: Defines unfamiliar terms or abbreviations. For example, "API stands for Application Programming Interface".

Use Cases

Tooltips are ideal for:

• Explaining icons or buttons when space is limited.

• Defining technical terms, acronyms or abbreviations.

• Providing quick usage tips and guidance.

• Previewing truncated text like long menu options or link names.

Some well-known companies using tooltips include Google, Slack, Apple, and Duolingo. For example, in Google Docs, hovering over an icon will display its function. In macOS, the dock displays tooltips when you hover over app icons.

Tooltips are a simple but highly effective user experience element. When used appropriately, they make interfaces more intuitive and help users get the most out of websites and apps. No wonder they've become ubiquitous!

Best Practices for Using Tooltips

1) Keep it brief

Tooltips should be short and to the point. Aim for 1-2 sentences at most to quickly explain the feature or option without overwhelming the user. Brevity is key.

2) Be helpful

Tooltips should provide helpful information and guidance. Explain what the feature does, how it works or what the options mean. For example, ‘Click to save’ or ‘Drag to rearrange’ are helpful tooltips. Avoid being too generic.

3) Use an arrow

Place an arrow next to the tooltip to visually connect it to the element it refers to. This helps users instantly understand what the tooltip is explaining. Many companies like Google, Facebook and Microsoft use arrows in their tooltips.

4) Position carefully

Place tooltips close to the element they refer to, either above, below or to the side. Make sure the tooltip does not obscure important page elements or the option it refers to.

5) Test it out

Once you’ve added tooltips, test them out to ensure they display at the appropriate times and provide helpful information. Get a second opinion from others too, as they may spot issues you missed.

Tooltips are a great way to provide helpful nudges and guidance for your users without being too intrusive. When used well, they can really enhance the user experience and help people get the most out of your product. Keep these best practices in mind and your tooltips will be optimally effective.

Creating Tooltips With Nudge

To build tooltips using Nudge, follow these simple steps:

1. Create a new Tooltip campaign

From your Nudge dashboard, click “New Campaign” and select “Tooltip” under experiences. Give your campaign a name, fill out details, and click “Next”.

2. Choose your tooltip content

On the next screen, you’ll see options for text, images, and buttons within your tooltip. You can add:

• Text: Headlines, paragraphs, lists. Keep your content concise while still being helpful.

• Images: Product photos, diagrams, illustrations. Images are a great way to visually demonstrate your tooltip message.

• Buttons: Add actionable buttons like “Learn More” or “Get Started” to drive users to relevant pages on your site.

3. Select tooltip placement

Choose where on the page you want your tooltip to appear. Do you want it near a form field, link, image, or button? You can select any element on your site to anchor the tooltip to.

4. Set tooltip rules

The final step is setting the rules for when and how your tooltip appears. You can show it:

• After a time delay (like 3 seconds)

• When the user hovers over an element

• A certain number of times

• Until the user clicks “Got It!”

Preview your tooltip and then launch it to start educating and engaging your users!

Tooltips created with Nudge provide subtle guidance for your visitors without being disruptive. Follow these guidelines and you'll be building effective tooltips in no time.