search

sjmc11 / tourguide-js

TourGuide is a Javascript library for creating user tours and on-boarding steps for your apps.
https://tourguidejs.com
MIT License
592 stars 27 forks source link

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

Open JamMaster1999 opened 5 months ago

JamMaster1999 commented 5 months ago

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 commented 1 month ago

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 commented 1 month ago

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 commented 1 month ago

@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 commented 1 month ago

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 commented 1 month ago

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