Creating Tooltips – Apty Support

Reference: What is a Tooltip?

The following instructions set explains the procedure of creating Tooltips and consists of 3 steps:

To access Tooltips options in the Apty Studio:

1. Open the Apty Studio application and select the hosting application you plan to work with. The Studio menu opens.

2. Click on the Tooltips icon.

3. The system will prompt you to create a Frame, unless it was created earlier. If the required Frame for this page was created earlier, select it from the list.
To learn how to create a Frame, refer to this article.

To create a Tooltip:

1. On the Tooltips page click Create New Tooltip or the+ (Plus) button at the top right corner of the screen. You are redirected to the Tooltip creator page.

2. Click Select Spotlight. The control is now passed to the application page in the browser. Select the element which should be tied to the Tooltip.

3. Compose your hint text. Tooltips may vary from simple one-line hints to a more complex instructions that may combine text, hyperlinks and images depending on the complexity of the task. The standard toolbar at the top of the text area allows adding text styles (bold, italic, header, alignment).

NOTE: If the toolbar at the top of the text area is invisible, click the text area and at the bottom right corner of the text area the T(Toggle Rich Text Editor) button appears, click it to access the styles toolbar.

4. To add an image to your Tooltip, click the icon on the toolbar. The Insert / edit image screen opens. To attach an mage to a Tooltip, define the following details:

Source: Provide a source URL to the image. Your image should be posted and stored online to make it accessible to Apty.
Image description: Provide an alternative text to the icon / image you are adding to the Tooltip.
Dimensions: Since Tooltips are usually smaller in size, make sure that your image size is not too big. Define height and width of the image.
Constraint Properties: Check this box if you want to safe the ratio of width to height and make sure they are proportionate and the image is not too stretched in height or width.

5. Provide the Name for your Tooltip element. It should be unique within the Frame it belongs to.

6. Define the button position:

Apty offers 12 predefined positions to locate the balloon around the field it belongs to. The preview of the position is available on the hosting application in the live mode.
Icon offset: Allows setting up the proximity of a balloon to a field.

7. Click Save to start using a new Launcher. It is now available as a part of a Frame in the Admin Console, but to make it active, the Frame should be in a published state. For more details refer to: Publishing Frames

To publish a Frame with a Tooltip:

When all the Tooltips are added to the required Spotlights in a Frame and are ready to be used, system still preserves them in the Draft status, unless stated otherwise.

To change the Frame status to Ready or Publish:

PATH: Admin Console > on the left side panel select an application you've worked at in the Apty Studio > Publish > Frames

Draft: This state specifies that the content is in the development state and is not ready for testing or being available for end users.
Ready: This state defines that the instructional content is ready for testing in the development or test environment. In this state the content can be seen in the Apty Studio only in the development environment but is not available in the production environment.
Publish: This state specifies that the content has been tested and is ready to be available for the hosting application end users. The content in this state will be visible in the Apty Studio to the production environment.