> For the complete documentation index, see [llms.txt](https://help.usejimo.com/docs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.usejimo.com/docs/experiences/hints.md).

# Hints

## What Are Hints?

Hints are **targeted tips,** anchored to specific UI elements the same way as tooltips or badges. Unlike Tours or Surveys, they’re non-sequential and **all displayed simultaneously**, acting like a persistent layer of guidance. 

This approach is perfect for **inline help**, **feature discovery**, or **DIY onboarding**, where users can hover or click to see more info at their own pace.

***

## Overview

### 📺 Tutorial: First Hints

{% embed url="<https://youtu.be/zsp8F-hE-Fc>" %}
First Hints
{% endembed %}

* **Always-On Guidance:** All hints appear together, so users can explore them as needed without moving step by step.
* **UI-Integrated:** Attach each hint to a targeted element, such as a button or icon, making help seamlessly integrated into your product.
* **Optional Entry Points:** Hints can link out to other experiences (e.g., a Tour or Survey) for users who want deeper context.

***

## Use Cases

Explore our [demo website](https://explore.usejimo.com/dashboard) to see Hints in action. Choose between different experience examples to see how multiple hints can be **effectively scattered** in context.

<figure><img src="/files/x8tBIxwpGUhrTeBvxbZw" alt=""><figcaption></figcaption></figure>

* **Inline Help:** Provide immediate clarifications or definitions near key UI elements.
* **Self-Guided Onboarding:** Let users discover relevant tips on demand, rather than a mandatory tour.
* **Contextual Reminders:** Highlight underused or advanced features with subtle nudges.

***

## How to Access

1. **Navigate to Experiences:**\
   From your [Jimo dashboard](/docs/build/dashboard.md), go to [**Hints**](https://i.usejimo.com/hints).

2. **Create or Select Hints:**
   * **First-Time Users:** Click **"Create Your First Hints"**.

   * **Returning Users:** Click the **+ New Hints** button in the top-right corner.<br>

3. **Choose a Template or Start from Scratch:**
   * **Templates:** Select from prebuilt hint layouts for common use cases.
   * **From Scratch:** Create your own hints set, customizing each tooltip or badge as desired.<br>

***

## Main Features

Jimo’s Hints come with a **robust set of tools** that let you create **simultaneous, context-sensitive tips** across your UI. Below is an overview of how Hints work. For a detailed breakdown of hint types, styling, and positioning, visit our [**Hints Components** **page**](/docs/experiences/hints/components.md).

### Builder

Since Hints don’t follow a step-by-step flow, you won’t see a Flow Builder tab—only the **Content Builder**.&#x20;

All hints are managed in a **single tab** interface, where you can add or remove hints via a top bar. Ordering them here doesn’t affect user flow, each hint displays independently on the page.

<figure><img src="/files/VB5ztWdUmAD9UWEVrhd4" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Name and Back Button (A)</strong></summary>

* **Edit Banner Name:** At the very top, you can edit the name of your hints group for easy identification.
* **Back to Dashboard:** Use the arrow next to the name to quickly return to the [Dashboard](/docs/build/dashboard.md) overview of all your hints groups.

</details>

<details>

<summary>Step Manager <strong>(B)</strong></summary>

When you create a new Hint, you’re actually creating a **hint group** that shares the same targeting settings.&#x20;

⇒ *Since all hints within the group display simultaneously, their order is purely for organizational purposes.*

From the **Step Manager** at the top of the builder, you can:

* **Delete Hints**: Hover over a hint and click the trash icon to remove it.
* **Add New Hints**: Click the `+` button to create a new hint. You’ll be prompted to select its type. See [components types](/docs/experiences/hints/components.md).
* **Reorder Hints**: Drag and drop hints within the manager to rearrange them for better organization.

</details>

<details>

<summary><strong>Action Buttons (C)</strong></summary>

* **Save:** Secure your progress with the 'Save' button, which also [automatically saves your work regularly](#user-content-fn-1)[^1].&#x20;
* [**In-App Editor:**](/docs/build/builders/in-app-builder.md) Visualize and edit the survey within the context of your actual website by indicating the starting point URL.
* [**Preview:**](/docs/build/preview.md) Simulate a full survey flow to see how it appears and behaves.
* [**Target & Publish:**](/docs/publish/target-and-publish.md) Set the criteria for who will see the banner and when it will be displayed.

</details>

### Legacy Builder

Within the Legacy Builder, you’ll **attach** each hint to a UI element and **customize** its text, icon, and basic behaviors. This central pane ensures you can configure all hints in one place, keeping the process streamlined while letting you match your brand’s style.

<figure><img src="/files/DwMz8wuuxWcWp70GoNyI" alt=""><figcaption></figcaption></figure>

<details>

<summary><strong>Properties Sidebar: Elements Editor (A)</strong></summary>

* **Modify Attributes:** Adjust positioning, styling, and animations for the currently selected element in the navigator.

</details>

<details>

<summary><strong>Builder Menu (B)</strong></summary>

* [**Navigator:**](/docs/build/navigator.md) Manage and edit elements within the hint.
* [**Themes:**](/docs/build/theme.md) Apply consistent styling across your hint.
* [**Translations:**](/docs/build/multiple-languages.md) Manage multi-language versions.

</details>

<details>

<summary><strong>Navigator (C)</strong></summary>

* **Element List:** See all elements in the hint, with the selected element highlighted.
* **Element Selection:** Click to edit specific elements via the Properties Sidebar.

</details>

<details>

<summary><strong>Live Step Preview (D)</strong></summary>

* **Real-Time Editing:** View and edit elements in the central preview.
* **Element Interaction:** Click on elements to modify content directly.

</details>

<details>

<summary><strong>CSS Selector (E)</strong></summary>

* [**Positioning:**](/docs/build/positioning.md) Use the quick access pop-up to apply CSS selectors to position your hint in context on your app. Adjust the position from the step parameters in the sidebar.

</details>

***

## Best Practices

{% stepper %}
{% step %}
**Don’t Overcrowd**

Too many hints can overwhelm users; focus on the most crucial tips.
{% endstep %}

{% step %}
**Keep Them Subtle**

Hints should feel like helpful signposts, not distracting pop-ups.
{% endstep %}

{% step %}
**Use Clear Labels**

Provide short, descriptive text that instantly clarifies an element’s purpose.
{% endstep %}

{% step %}
**Offer Deeper Links**

Allow hints to link to a more in-depth Tour or documentation if users want more details.
{% endstep %}

{% step %}
**Segment Wisely**

Show hints only to the relevant audience (e.g., novices, advanced users) for maximum relevance.
{% endstep %}
{% endstepper %}

[^1]: <img src="/files/xfc0XXAh3gO7Jx08AauJ" alt="" data-size="original">