Contextual help

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

Illustration 1. Appearance of the property allowing access to the contextual help editor

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

Illustration 2. Appearance of the editor drawer without added contextual helps

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.

Illustration 3. Appearance of a newly added and unconfigured contextual help

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

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

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

• 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.

Illustration 4. Example of two different contextual helps defined and displayed conditionally

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

Illustration 5. Appearance of the expanded contextual help editing window

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 when focused,

• Interactive contextual help - determining 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 many tooltips. They are then evaluated in top-to-bottom order. Each contextual help tile has a handle on the left that allows you to grab it and then move it to the desired position. This way you can order the whole list and change the order of items.

Contextual help visibility

In the detailed view you should 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.

Illustration 6. Sample appearance of a tooltip on the form

Illustration 7. Sample appearance of a tooltip on the form

Demo form: demoTooltips

♿WCAG: WCAG best practices for low-code dev