Make content inside of target be clickable [Counter-intuitive]

[JamMaster1999]

Is there a way to make the content inside the target clickable? Right now the opposite is true. The content outside of the target is clickable and the content inside is not clickable.
This is counter intuitive to the user because they should be able to easily click inside the target so that they can practice using the product through the interactive tutorial.

Besides that great library!!

[ra-dave]

I have the same question. I need the user to be able to interact with my input field while the tour is in progress.

[ptrtht]

Same here! Would like my user to click things / enter text into target element.

Without these the package, although very nice is not really functional :(

[faoiseamh]

@ptrtht @ra-dave @JamMaster1999 @jeffplourd @PhoenixFnX

I played around with the example tour on the package site and was able to make the highlighted target elements intractable, other thank links that would navigate within the current tab (opening links in a new tab works though), simply by adding pointer-events: none to the .tg-backdrop CSS class, which causes pointer events to pass through the backdrop to the intractable elements below.

@sjmc11 IMO it probably makes sense to either document this, or add an option directly supporting this so folks can more easily control these sort of interactions. It would also be ideal to elegantly support using these interactions to navigate to the next tour step, so users can try out the interaction a tour step is describing and in doing so, transition to the next step of the tour. Again, thanks for the great work on this library!

---

Original comment:

I'll add my vote for this as well. Just stumbled across this library and it looks fantastic all around, but without the ability to interact with targeted elements, this wouldn't be usable for most use cases I'd otherwise love to adopt it for.

From working through issues with the implementation of interactive-highlighted elements with similar libraries, I can appreciate the challenges involved in achieving this robustly across a diversity of contexts and browsers, so I know this isn't necessarily a light lift, but are there any plans or thoughts maintainers / contributors could share on this front?

Appreciate the work regardless, this is a great little package!

[sjmc11]

Hey, thanks for the conversation on this issue.

Definitely something that can be made possible with a configuration option. I'll try and find the time to get this updated soon.

Will likely be early September due to other commitments.

[JamMaster1999]

Hey guys, sorry I forgot to update everyone here.
You can very simply fix this by:
document.querySelector(".tg-backdrop").style.pointerEvents = "none"

[sjmc11]

The solution to this has been merged and released on npm as version 0.0.18

You can now use the propagateEvents option on steps.

Thanks to @Akxe for getting round to it.

[kathleen-ju]

@sjmc11 does the propagateEvents only works if exitOnClickOutside is set to false? It seems like the case for me...
Is there a way to set exitOnClickOutside to true but user can still click on the element inside target highlighted area? Setting tg-backdrop").style.pointerEvents = "none" doesnt fix it...