I have set up a tour with steps and ids for elements. However, any element that is nested within an angular component or sourced from an Angular library will not be highlighted.
Here is my tour setup:
this.introJS.setOptions({
tooltipClass: 'customTooltip',
highlightClass: 'customHighlight',
exitOnOverlayClick: false,
disableInteraction: false,
steps: [
{
intro: 'Welcome to the website, let me show you around!',
},
{
element: '#step2',
intro: 'Go to Home',
position: 'right'
},
{
element: document.getElementById('step3'),
intro: 'Fill out the form',
position: 'right'
},
{
element: document.querySelector('#step4'),
intro: 'Click Create an account',
position: 'right'
}
]
}).start();
This is a snippet of the HTML code:
<div>
<mat-card>
<mat-card-content>
<form id="step3" [formGroup]="testForm">
<h3>test</h3>
<mat-form-field appearance="outline">
<mat-label>label</mat-label>
<mat-select formControlName="role">
<mat-option>1</mat-option>
</mat-select>
</mat-form-field>
</form>
</mat-card-content>
</mat-card>
</div>
Below is what the tip looks like: https://i.sstatic.net/PTDRq.png
The tip appears in the center without highlighting anything.
Edit: If CyC0der's answer is correct, then I am encountering an issue with using the ngnIntroService. I am having difficulty including it correctly. I have posted another question regarding this specific problem here.