Create Tooltips – Apty Support

Create Tooltips to communicate additional information to your users about the elements in your application using the following steps.

1. Login to the Apty Studio after loading it on your web browser.

2. Click Select Application.

select

3. Choose SFL from the list of applications to launch Salesforce in your browser.

Note:

Ensure that you have added your applications to the Admin Portal before creating any content on it. To learn more, see Adding a New Application to the Admin Portal.
SFL is a default keyword created during the process of adding Salesforce to the Admin Portal.

4. Once the application opens, select Tooltips on your Apty Studio.

Note:

You can create Apty Content only if the application is connected with the Apty Studio. A well connected application is indicated by a green color icon.

5. Select a Frame to start creating Tooltips on your application page.

select a Frame.png

Note:

Each page in your application must have a unique Frame connected with the Apty Studio to create Apty Content like Validations, Launchers, Tooltips, and Announcements.
The Tooltips screen will prompt you to create a new Frame, unless it was created earlier, in which case Apty Studio will connect to one automatically. You can also choose a different Frame from the list of Frames that are already on the page. To understand the importance of Frames in the creation of Apty Content, see What are Frames.

6. Click the + icon or Create New Tooltip button to start creating a Tooltip.

click plus icon.png

7. Click Select Element on your Apty Studio and then hover you cursor over the element you want to select on your application.

select element.gif

Note:

Element Selection is a default selector when the user creates a new Tooltip. However, you can choose one of the following advanced selectors from the drop-down:

Custom Script
CSS Selector
XPath
Text Selection

For additional information on how advanced selectors work, see Advanced Element Selectors.

8. Enter the Tooltip description and name in the input fields in your Apty Studio.

enter description and name.png

Note:

You can also combine hyperlinks, images, and videos with the Toltip text to enhance user experience on your application by capturing user's attention, presenting information in a more digestible way, and helping them navigate to the page they are interested in.

text

To learn more, see Add a Link, Image, or Video to the Tooltip.

9. Under ICON POSITION, choose the desired Tooltip position.

Info:

You can use the Icon Offset bar to set up the display proximity of a balloon on the application page.

10. Select the THEME for your Tooltip from the drop-down.

Info:

To learn how to create new themes, see Themes (Version 4.x).

11. Under AUTO PLAY, check the trigger notification box to auto display the Tooltip after a specific time of user inactivity.

click

Note:

Trigger Notification helps to nudge the user and assist them in completing the task when the user becomes inactive for a few seconds on your application.
You can select the time period from the dropdown to display the Tooltip. For example, when a user initiates an action on your application and then stays inactive for 5 seconds, you can configure the Tooltip to display on the user's screen after 5 to 30 inactive seconds to prompt them to finish the process.
The Trigger Notification will only work on HTML input fields and HTML select dropdowns (the elements which have focus event).

12. Select a segment to display your Tooltip for a specific user group in that segment.

Note:

If no segments are selected, the Tooltip will be visible to all users on the application.
To create segments, see Creating Segments (Version 4.x and above).

13. Check the Display between dates box to schedule the display of your Tooltip in the specified time zone between the specified dates.

14. Click Save.

Once you create a Tooltip, you can make it accessible for your end users by publishing it either through the Admin Portal or the Apty Studio.

For more information, see Publishing Apty Content(version 4.x or above).

Related articles