# Context help

Most components in Eximee Designer can have contextual help defined. Exceptions are components **QR code generator** and **Page**.

<figure><img src="/files/09bc3292950e6927e9c760cf88090fed30a8b25d" alt=""><figcaption><p align="center"><em><strong>Figure 1.</strong> Appearance of the property that allows access to the contextual help editor</em></p></figcaption></figure>

When you enter the contextual help editor, a drawer slides out. When the component has no contextual help added, the drawer content looks as shown in the illustration below.

<figure><img src="/files/ac002e6fd89fd2aae02ec7625c88ba2c44d7d68b" alt=""><figcaption><p align="center"><em><strong>Figure 2.</strong> Appearance of the editor drawer with no contextual help added</em></p></figcaption></figure>

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

<figure><img src="/files/1df34569e574d9be888b5d217dcc1fcdc52b61b9" alt=""><figcaption><p align="center"><em><strong>Figure 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 displaying it.

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

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

* the values of session variables,
* the 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 the help content, you can use drag & drop functionality.

<figure><img src="/files/1bbbd8887737e66a404d4fe000aed3cfd17928d6" alt=""><figcaption><p align="center"><em><strong>Figure 4.</strong> Example of two different context-sensitive help definitions displayed conditionally</em></p></figcaption></figure>

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

<figure><img src="/files/d365e83ea336bf2a1a5a112a1545c16debf81de1" alt=""><figcaption><p align="center"><em><strong>Figure 5.</strong> Appearance of the expanded contextual help editing window</em></p></figcaption></figure>

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

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

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

**Contextual help visibility**

In the detailed view, one of two presentation methods for contextual help must be specified:

* Help icon,
* Visible on field focus.

Contextual help visibility is also controlled by an optional condition.

<figure><img src="/files/25dd094cc096a5dc1e62b7059dc77013618ba07c" alt=""><figcaption><p align="center"><em><strong>Figure 6.</strong> Example appearance of a tooltip on the application</em></p></figcaption></figure>

<figure><img src="/files/87859fec546f7503a9bd9999f8ced1b2bbf7e773" alt=""><figcaption><p align="center"><em><strong>Figure 7.</strong> Example appearance of a tooltip on the application</em></p></figcaption></figure>

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

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


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.eximee.com/documentation/documentation-en/budowanie-aplikacji/interfejs-uzytkownika/formularze/praca-z-komponentami-bazowymi/pomoc-kontekstowa.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.