Contextual help

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

Figure 1. Appearance of the property that provides access to the context help editor

When entering the context help editor, a drawer slides out. If the component has no context help added, the drawer contents look as shown in the illustration below.

Figure 2. Appearance of the editor drawer with no context helps added

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

Figure 3. Appearance of the newly added and unconfigured context help

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

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

In the field Add condition you can define dynamic context help with content depending on conditions:

• session variable values,
• values of other components.

If several context helps are defined, only the first context help whose condition is met will be displayed. To change the order of the help content, drag & drop functionality can be used.

Figure 4. Example of two different context helps defined and displayed conditionally

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

Figure 5. Appearance of the expanded context help editing window

In the detailed view, the following properties can be defined:

• Style name - name of the style to be applied to the context help,
• Help icon - determine whether a context help icon should be displayed,
• Visible on field focus - determine whether context help should be displayed during selection,
• Interactive context help - determine whether it will be possible to interact with the context help content,
• Width/Height context help tooltip,
• Position of the context help relative to the component it applies to.

In the context help editor drawer, multiple tooltips can be defined. They are then considered from top to bottom. Each context help tile has a handle on the left side that allows you to grab it and then move it to the desired position. In this way the entire list can be sorted and the order of the items changed.

Context help visibility

In the detailed view, one of two ways of presenting context help must be specified:

• Help icon,
• Visible on field focus.

Context help visibility is also controlled by an optional condition.

Figure 6. Example appearance of the tooltip in the application

Figure 7. Example appearance of the tooltip in the application

Demo application: demoTooltips

♿WCAG: Good WCAG practices for low-code dev