Overlay doesn't disable elements in the background

[SanjivaniYadav]

Hii,
I want to disable the background and enable only the elements which are highlighted, But I could not see any method or property in the documentation which disables the background elements, As currently I am using this library in a small project I have manually disabled all the elements of the overlay, But In case of Big projects it will be inefficient to do that,

also the overlay is not properly working with the elements like matforms or matSelect in angular, I want to make the dropdown over the overlay but when i decrease the Z-index of overlay it goes behind the form, help me with this bug

@sjmc11 Please suggest some solution for these...

[sjmc11]

Hi @SanjivaniYadav - I haven't experience with matForms so wouldn't be able to advise on a solution for using Tourguide with that particular library.

I have just released v0.0.26 which now supports the activeStepInteraction option to allow users to click inside of the focused tour step element without the need for a custom CSS override.

Additionally, if you have the exitOnClickOutside option to false, it will prevent the user interacting with elements behind the backdrop overlay.

[SanjivaniYadav]

Great! Now the overlay works. Thank you for the update.

I have a request regarding the documentation. Some methods are not clearly explained, making it difficult to understand their usage. For example:

refresh()
#
Returns a promise

"Refreshes all properties and elements of the tour, including re-computing tour steps. This is useful when injecting new elements with the [data-tg-tour] attribute into the DOM without restarting an active tour."

However, in the documentation, under this method, you provided an example for deleteFinishedTour() instead of refresh().

There are similar inconsistencies and errors in other parts of the documentation. Please review and fix these issues to ensure clarity and accuracy.

Additionally, I have some doubts:

1. How can we delete previously added steps array in a tour so that we can add new steps for a different tour on the same page?

2. How can we navigate to a new page when clicking on a specific element?

3. The tour does not work on a new page unless we refresh it. Do you have a solution for this?

@sjmc11, I hope you can help with this.

[sjmc11]

Thanks @SanjivaniYadav

Documentation will be updated as and when resource is available - but will try and find the time to improve it.

1. There isn't currently a method to delete individual steps, however using groups might be a way to achieve what you're looking for. I don't have your exact use case.

2. That should just be a case of including a link on your actual page and using the correct combination of activeStepInteraction option.

3. I would have to get an example to see what the cause might be, however the .refresh() method might be one possible approach.

[SanjivaniYadav]

There is still a bug regarding Overlay, that...
It does not work for the step which does not have target OR has body as a target, Such step enables all the elements under the overlay
@sjmc11 Is there any solution for this bug