VisualSP's Walkthrough builder allows you to anchor the walkthrough bubble to an element on the page:
This functionality gives you many options when it comes to creating a help item and being able to point out exactly what you want to highlight and draw attention to.
When creating your walkthrough and using the element selector tool:
the elements you can anchor the walkthrough step to are highlighted with an orange border as you move your cursor around the page:
When you click on an element, the border color changes to green to indicate it is the selected element:
Why does my walkthrough skip a step?
You may come across a situation where, in a multi-step walkthrough, one of your steps will be skipped. This will happen when VisualSP is unable to locate the element that the walkthrough step is attached to on the page. This will occur most often on a page that is rendered with a lot of dynamic elements, such as on a SharePoint modern page. To help understand why this happens, it is necessary to go into a little bit more depth into what exactly an element is.
What is an element?
If you look at the source code of a page, it will contain a lot of markup that isn't displayed on the page. This is the code behind the Shared with me element selected above:
On a page with dynamic elements on it, the class name "a#tab-list-header-link-shared-mru", for example, may be appended with a further identifying number, such as "-375". If you were to refresh the page, this element would have a different identifying number at the end. Since the walkthrough step is unable to match the element, the step is skipped.
As an option in this situation you can try using this syntax: [att*="value"] which will select an element that has the specified attribute with a value containing a given substring.
Besides skipped walkthrough steps, other problems you may see include inline help icons appearing randomly on the page, and inline help icons disappearing when something is opened on a page.
Using custom jQuery to select your element
To address these anomalies, you can use a custom jQuery selector.
By default, this option is un-checked. When checked, the selector tool will expand to display a field to insert a Custom jQuery Selector:
Picking your custom jQuery selector
To find the correct custom jQuery selector you will need to use the Developer Tools that are available in all major browsers. In this example we will be using the Developer Tools found in Chrome.
To open Developer Tools in Chrome, press Crtl + Shift + I. Developer Tools will open and your screen will look something like this:
First click the Elements tab (1), and then select the pointer icon (2):
Hovering your cursor over different elements on the page will reveal the underlying jQuery code:
Click the element to select it. In the Elements window of the Developer Tools, some code will be highlighted:
Right click in the highlighted area to open up a dialogue box, click on Copy, then Copy selector:
Paste the selector that is in your clipboard into the Custom jQuery Selector field:
Click outside the Custom jQuery Selector field. On the webpage the element should now be highlighted with a green border:
Now click Use It!
Preview your walkthrough to make sure it works correctly. Save your help item and refresh the page and test again. You may need to experiment with different elements until one works consistently.