Clicking a button that's a target of a step

[sb8244]

Is it possible to connect a button on the page to trigger the next step? In my testing, I noticed that the backdrop highlights the element but it's then not clickable.

I'd love to target a button (or button container), click the button, then trigger the next step in the tour.

[sjmc11]

Hi @sb8244

Depending on the button placement you can do either of the following.

If the button is inside the highlight element area

Add pointer-events: none style to the .tg-backdrop element. This will allow you to click through and interact with elements inside the highlighted area.

If the button is covered by the dark overlay area

In this case, you will need to set the exitOnClickOutside option of your TourGuide configuration to false

This will allow you to click on elements in the backdrop without triggering the auto-close.

---

I've tweaked the basic codepen example to log to the console when you click the button, in this example the exitOnClickOutside option is false so it can be clicked anywhere in the tour, I've also added the css override for the highlight overlay so it can be clicked when it's the active tour element.

[aleaforny]

pointer-events: none

Any idea how we could also make the links (a with href) clickable inside the highlighted area (although I know that will lead the user to leave the tour, but it's a specific use case)