# 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FzkNblIGVFbpotI48AhAG%2Fimage.png?alt=media&#x26;token=3a9edacb-8a72-4add-9ad5-31818cc22bea" 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](https://help.usejimo.com/docs/build/dashboard), 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**](https://help.usejimo.com/docs/experiences/hints/components).

### 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FLYq9sQ4acZiflYP05toE%2Fimage.png?alt=media&#x26;token=1dea7274-e2b8-4762-b5b6-305dd8def357" 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](https://help.usejimo.com/docs/build/dashboard) 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](https://help.usejimo.com/docs/experiences/hints/components).
* **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:**](https://help.usejimo.com/docs/build/builders/in-app-builder) Visualize and edit the survey within the context of your actual website by indicating the starting point URL.
* [**Preview:**](https://help.usejimo.com/docs/build/preview) Simulate a full survey flow to see how it appears and behaves.
* [**Target & Publish:**](https://help.usejimo.com/docs/publish/target-and-publish) 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FV3XAb7VbLkaHYkHqrScM%2Fimage.png?alt=media&#x26;token=307430f4-9671-465a-9835-dc737b1a7122" 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:**](https://help.usejimo.com/docs/build/navigator) Manage and edit elements within the hint.
* [**Themes:**](https://help.usejimo.com/docs/build/theme) Apply consistent styling across your hint.
* [**Translations:**](https://help.usejimo.com/docs/build/multiple-languages) 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:**](https://help.usejimo.com/docs/build/positioning) 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="https://2794860263-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FKzAcDWQbK1gKbpra7bkb%2Fuploads%2FQ5r0zzDqjnuzuqPc4xSm%2FTMbuilderSave.png?alt=media&#x26;token=1f8501d8-918c-40b5-bbc2-1028e527d5e6" alt="" data-size="original">