Developing Tooltip guides

Tooltips display contextual information when users hover over or click on a specific element in the application or on the hint icon. They are independent of guided flows and are designed to be user-discoverable, offering just-in-time assistance without interrupting the workflow.

Creating a tooltip step

After creating a Tooltips-type guide in Nexthink Applications and accessing the guide in Adopt Editor:

1. Create a new step by selecting Add a Step or clicking the + icon.

2. Select an element on the page to associate with the tooltip. Tick (✔) to confirm. You may reselect the element when configuring tooltip Properties.

1. Click on the gear icon to access the tooltip step Properties to:

   • Add text and content

   • Define appearance

   • Define positioning options

   • Define display and trigger options

Adding text and content to tooltip step

From Adopt Editor, access the Properties of a tooltip step and open the Content tab to add the content visible to employees:

• Write and format the text using the Tooltip content editor.

• Optionally, add images.

• Optionally, add links to relevant pages, images, audio or video.

Defining Tooltip appearance

From the Adopt Editor left-side panel, access the Properties of a Tooltip and open the Appearance tab.

Use the toggle buttons to determine the component visibility:

• Include a cross button (x) to allow employees to close the tooltip.

• Enable step encapsulation to wrap the tooltip in an iframe. This prevents unintended interactions with the main page when clicking the tooltip.

Defining Tooltip positioning options

From the Adopt Editor left-side panel, access the Properties of a Tooltip and open the Position tab:

Tooltip position

Target element

Preview the element associated with the Step on the web application page. If needed, Reselect the element. Refer to the Using Element Selector in Adopt Editor documentation.

• If the system cannot display your preferred position due to space constraints, Adopt places it in the most suitable position in a clockwise direction.

Key pages

Target Key pages by ticking Show matches and/or selecting a key page from the list. You may also use the Search bar to filter the results by name.

• Predefined key pages allow you to associate the tooltip with a dynamic URL still recognizable by Nexthink Infinity, for example: https://impl.workday.com/*/d/home.htmld

• If you have no matching key pages, refer to the Key pages documentation for more information.

• If needed, Ignore key page selection altogether and define a static URL under Navigation.

Element location

Optionally, enable or disable Element selectors—configured by default in Nexthink Infinity Adoption settings—to make them specific to this step.

• The Element XPath selector override can be localized to a different language, given that it targets a specific block of text.

When using Adopt Editor within an application with iframes, the Show matches option cannot display the matching key page for the iframe in which the target element resides.

In these cases, Reselect the target element to display the matching key page.

Enable position recalculation when the user scrolls

Enable position recalculation when the user scrolls in cases where you have multiple containers with scroll bars aside from the main page. Generally, Adopt attempts to scroll through the main page to reach a tooltip-associated element. Enable this option and specify a container by its element ID to restrict the scrolling to that container.

Guide defaults

Enable or disable Guide defaults present in the Nexthink Adoption settings:

• Ignore recorded query parameters: When a tooltip navigates to a specific URL that contains a query, for example http://google.com/?query, enable this setting to disregard the query,meaning everything after/?, and only use the base URL.

• Display tooltip when element is not covered: Generally, Adopt display tooltips even when the associated elements are being overlapped by a modal window or dialogue. Enable this setting to ensure the tooltip only displays when the element is not being overlapped by other elements.

• Scroll to view element: Enable this setting to automatically scroll the page until the associated element is visible.

Use the Orientation, Custom region and z-index options to define the tooltip position relative to the selected element.

Tooltip placement

Select an Orientation to determine the direction from which the tootilp renders, based on the associated element's position.

• Auto is the default setting. Tooltips render from the top unless the element is at the top of the page, in which case they render from the bottom.

• Select top, right, bottom or left to specify a rendering direction.

Z-index

Select a Z-index source to determine the z-index origin point from which the Nexthink extension renders the tooltip.

• Theme uses the Nexthink default z-index value of 73999.

• Element uses the associated element's z-index value, determined via page formatting.

• Manual allows you to define z-index values for the shadow and tooltip. Ensure the tooltip has at least an increment of 1 over the shadow for correct display.

Defining Tooltip display and trigger options

From the Adopt Editor left-side panel, access the Properties of a Tooltip and open the Display tab:

• Enable or disable the Hint icon for the tooltip.

• Define the display triggers to specify when the tooltip should appear: at the beginning or upon completing an action.

  • Spot/Unspot triggers work for elements visible on the page, while Present/Unpresent refer to elements that exist but may not be visible on the page, set as hidden in the CSS, for example.

  • Spot in viewport triggers the tooltip when the element is visible on the employee screen.

  • Fill select/value and move on triggers the tooltip for interactions with input fields on the page, such as typing a word in a search bar or selecting an option from a dropdown.

  • Element loses focus triggers the tooltip when clicking away from a focused page element. For example, click away to disable typing from a search bar.