|Reference: What is a Tooltip?|
Tooltip icons are displayed upon mouse hover over the icon tied to a specific element of the underlying application. Tooltip can contain a combination of text, hyperlinks, and images.
The following instructions set explains the procedure of creating Tooltips:
- Accessing Tooltips option in the Studio ,
- Creating a Tooltip,
- How to add an image to a Tooltip,
- How to add a link to a Tooltip,
- Define the position of a Tooltip on a surface of a hosting application
- Publishing a Frame to which this Tooltip belongs.
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 Apty 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. Optional. 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 hight and width of the image.
- Constraint Properties: Check this box if you want to safe the ratio of width to hight and make sure they are proportionate and the image is not too stretched in hight or width.
- Url: Provide a source URL to the resource you are linking the Tooltip to.
- Text to display: Define the link text.
- Title: Define the alternative text that is shown when you hover over the link in the Tooltip.
- Target: Define whether the link should we opened in the same or new window.
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.
Once the Frame is published, Tooltips cannot be modified. In order to modify the Tooltips, change the status of the Frame to the Draft state.