# Contextual help

Most components in Eximee Designer have the ability to define contextual help. Exceptions are components **QR code generator** and **Page**.&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAJFsHSGojqoYKF3MtRsS%2Fimage.png?alt=media&#x26;token=c59b3184-718e-44bb-8fea-92c8a97adcfd" alt=""><figcaption><p align="center"><em><strong>Illustration 1.</strong> Appearance of the property that provides access to the contextual help editor</em></p></figcaption></figure>

Upon entering the contextual help editor, a drawer slides out. When a component has no contextual help added, the drawer content looks like in the illustration below.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FmSfXS3D1VCwS5399vHtx%2Fimage.png?alt=media&#x26;token=66158061-7a69-4656-9ec5-4f3e5e5abbbd" alt=""><figcaption><p align="center"><em><strong>Illustration 2.</strong> Appearance of the editor drawer without added contextual helps</em></p></figcaption></figure>

Clicking the button located at the bottom of the drawer **Add contextual help** adds an item to the drawer. It represents a new contextual help.&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FtulPS6bGZIlxv5vvLdiu%2Fimage.png?alt=media&#x26;token=05c7218c-a572-4dcc-920b-abf074994ed2" alt=""><figcaption><p align="center"><em><strong>Illustration 3.</strong> Appearance of a newly added and unconfigured contextual help</em><br></p></figcaption></figure>

The basic editable properties are the name of the contextual help key and the condition for its display.

Before adding a key with contextual help content, the key and its content must be added in the **Translations**tab. Editing is performed by clicking in the **Provide key name**.

In the field **Add condition** you can define dynamic contextual help with content dependent on conditions:

* values of session variables,
* values of other components.

If several contextual helps are defined, only the first contextual help whose condition is met will be displayed. To change the order of help contents you can use the drag & drop functionality.&#x20;

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2Fbgb6OGXHabAYI5lGMWqE%2Fimage.png?alt=media&#x26;token=7be80d14-c052-49e9-9968-ed57f285cb67" alt=""><figcaption><p align="center"><em><strong>Illustration 4.</strong> Example of two different contextual helps defined and displayed conditionally</em></p></figcaption></figure>

Clicking **Show details** expands the tile and allows access to additional options, visible in the illustration below:

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FWVirCyXrwPJoVhANli4x%2Fimage.png?alt=media&#x26;token=4f8fb9d4-d066-455e-b1de-153c389e2f20" alt=""><figcaption><p align="center"><em><strong>Illustration 5.</strong> Appearance of the expanded contextual help edit window</em></p></figcaption></figure>

In the detailed view it is possible to define the following properties:

* **Style name** - name of the style to apply to the contextual help,
* **Help icon** - determining whether the contextual help icon should be displayed,
* **Visible on field focus** - determining whether the contextual help should be displayed during focus,
* **Interactive contextual help** - determining whether it will be possible to interact with the contextual help content,
* **Width/Height** of the contextual help bubble,
* **Position** of the contextual help relative to the component it refers to.

In the contextual help editor drawer you can define multiple tooltips. They are then evaluated in order from top to bottom. Each contextual help tile has a handle on the left that allows you to grab it and then move it to the desired position. In this way you can order the entire list and change the order of items.

**Visibility of contextual help**

In the detailed view you must specify one of two ways of presenting contextual help:

* Help icon,
* Visible on field focus.

The visibility of contextual help is also controlled by an optional condition.

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2F8GON4c5qVR4TQhJ7k05f%2Fimage.png?alt=media&#x26;token=17040d5e-8b20-4255-ae90-521a7a4b1b81" alt=""><figcaption><p align="center"><em><strong>Illustration 6.</strong> Sample appearance of a tooltip on the application</em></p></figcaption></figure>

<figure><img src="https://2112972046-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F2CssJT0zIo4SJQLbSZ6l%2Fuploads%2FAyY2OjiurZb8TYFJdfAK%2Fimage.png?alt=media&#x26;token=c0ef40a0-f5f8-4e46-9e0f-973fa7f2f097" alt=""><figcaption><p align="center"><em><strong>Illustration 7.</strong> Sample appearance of a tooltip on the application</em></p></figcaption></figure>

{% hint style="info" %}
Demo application: demoTooltips
{% endhint %}

{% hint style="info" %}
&#x20;♿WCAG: [WCAG best practices for low-code dev](https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/proces-biznesowy/tworzenie-procesu-biznesowego-w-bpmn-2.0/dobre-praktyki)
{% endhint %}
