Element ID in Tooltip/Tour Configuration

This guide explains how to identify and configure an Element ID in Page Pilot so that a Tour step or Tooltip is displayed on the correct UI element within a web application.

In This Section

Understand what an Element ID is.
Learn two methods to identify an Element ID:
- Using Browser Inspect
- Using the application's Source Code
Configure the Element ID in Page Pilot.
Save, publish, and verify the Tour or Tooltip on the target element.

Element ID

An Element ID is a unique identifier assigned to a user interface (UI) element, such as a button, input field, or link. Page Pilot uses the Element ID to display a Tour step or Tooltip on the correct element within a web application.

When is an Element ID Required?

An Element ID is required whenever you want to attach a Tour step or Tooltip to a specific UI element in the application.

Screen- Tooltip Puplished on selected Web App Element

Before You Begin

Ensure that:

The web application is running and accessible.
The target element is visible on the page.
A Tour or Tooltip has already been created in Page Pilot.
You have access to either Browser Inspect or the application Source Code.

Note: If the target element does not contain an Element ID, request the developer to add one in the application source code.

Identify the Element ID

Choose one of the following methods to identify the Element ID.

Method 1: Browser Inspect on Web Application Page

(Recommended for Testers and Business Users)

Open the web application(School App) in a browser and Navigate to the required page.

Right-click the target element and select Inspect.
Locate and copy the Element ID from the HTML.

Screen- Web Application and Element

Screen- Web application Page on Browser

Screen - Select the Element ID from Right side code Panel

Method 2: Retrieve the Element ID from the Source Code (Recommended for Developers)

Step 1: Open the application source code in Visual Studio Code (VS Code) and navigate to the project file containing the required UI element.

Step 2: Locate the required UI element, copy its Element ID, and use it while configuring the Tooltip or App Banner.Screen-Element id on source Code

Screen- Access Element ID on Source Code

Step 1: Identify the Element Id

Chooseeitherof the following methods to locate the requiredElement ID:

Method 1:Browser Inspect
Method 2:Source Code (Visual Studio Code)

Step 2: Copy The Element Id

Copy the requiredElement IDand use it while configuring theElement IDin Page Pilot from above method screen.

Configure the Element ID in Page Pilot

After obtaining the Element ID, follow these steps:

Step 3: Open the Tour or Tooltip

Log in to Page Pilot.
Select the required workspace.
Open theTours or Tooltips module.

Step 4: Click on Edit

Click Edit for the required Tour or Tooltip.

Screen- Select the created Tour

Step 5: Open the Behaviour Tab

Select the Behaviour tab in the Visual Editor.

Screen- Behaviour Tab to Access Element ID

Step 6: Configure the Element ID

Paste the copied Element ID into theElement IDfield.

Important:Always prefix the Element ID with#(for example,#addButton).

Step 7: Save Changes

Click Save Changes.

Step 8: Click on Publish

Click on publish drop down menu.

Screen- Click on Published Tooltip

Step 9: Review the Details Before live

Before making the Tooltip live, review and configure the publishing settings:

Tooltip Name
Start Date
End date
Show the Tooltip once setting

Step 10: Publish the Tooltip

After verifying all settings, click the Publish button to make the Carousel live.

After publishing the tooltip, run the web application to verify that it appears on the target element, as described earlier.