# 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](/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides.md) in Nexthink Applications and [accessing the guide in Adopt Editor](#accessing-adopt-editor-for-tooltips): 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**.
3. Click on the gear icon to access the tooltip step **Properties** to: * [Add text and content](#adding-text-and-content-to-tooltips) * [Define appearance](#defining-tooltip-appearance) * [Define positioning options](#defining-tooltip-positioning-options) * [Define display and trigger options](#defining-tooltip-display-and-trigger-options)
## Adding text and content to tooltip step From[ Adopt Editor](#understanding-adopt-editor-for-tooltips), 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 from an URL or the [Asset library](/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/managing-adoption-assets-with-the-asset-library.md). * Optionally, add links to relevant pages, images, audio or video.
## Defining Tooltip appearance From the [Adopt Editor left-side panel,](#understanding-adopt-editor-for-tooltips) 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,](#understanding-adopt-editor-for-tooltips) 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](/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/using-element-selector-in-adopt-editor.md) 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](https://docs.nexthink.com/platform/user-guide/applications/configuring-applications/configuring-web-applications/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](/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings.md#defining-element-selectors)β€”to make them specific to this step. * The **Element XPath** selector override can be [localized](/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/creating-guides.md#localizing-content) to a different language, given that it targets a specific block of text. {% hint style="warning" %} 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. {% endhint %}
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](/platform/user-guide/adopt/guide-creation-and-management-from-nexthink-applications/configuring-adoption-settings.md#setting-guide-defaults): * **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. {% hint style="info" %} Use the **Orientation**, **Custom region** and **z-index** options to define the tooltip position relative to the selected element. {% endhint %}
### **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,](#understanding-adopt-editor-for-tooltips) 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.
--- # Agent Instructions: Querying This Documentation If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question. Perform an HTTP GET request on the current page URL with the `ask` query parameter: ``` GET https://docs.nexthink.com/platform/user-guide/adopt/guide-content-development-from-in-app-adopt-editor/developing-tooltip-guides.md?ask= ``` The question should be specific, self-contained, and written in natural language. The response will contain a direct answer to the question and relevant excerpts and sources from the documentation. Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.