Clicked through the target

[AlanNgHub]

Not a bug,but just wondering is this feature available. Great work btw

[tnicola]

Hi @AlanNgHub ,

Thanks!No, It's not possible to click through the target right now. I don't know if I'll introduce this feature in the future. Is there any use case in which it would be helpful? Anyway will think about it. In the meanwhile, if you need to do perform some actions between steps you can use the prev and next events.

[BojidarIvanov]

Hi @tnicola ,

Great work with this package. It is very useful. btw, I too think it would be very handy to be able to click on a focused element. If you don't think of introducing such an enhancment can you please advise what steps should I take so that I would be able to click on a desired HTML element but not exiting the tour? Thanks.

[tnicola]

Hi @BojidarIvanov ,

Thank you!Since it seems a very hot topic I will prioritize the work on this feature. It's not so easy, due to the fact that you have an overlay (backdrop) on the target, I could pass the click event through it but you won't have the cursor styled as it should in that case. Let me investigate a bit further on this and I'll let you know soon.

[CarstenHouweling]

Setting some css pointer-events: none and / or pointer-events: all here and there works fine as far as i can tell. (tested in Chrome)

[Thanosar]

Setting some css pointer-events: none and / or pointer-events: all here and there works fine as far as i can tell. (tested in Chrome)

I set pointer-events: all in class backdrop-target with ng-deep but nothing changed. I set the same css in backdrop-container too, but nothing again! Could you give an example?

[Aidan-Chey]

Hey, came accross this issue when looking into your package for use in our app. If you need a use case for why to implement this sort of feature, often it it useful to be able to essentially force the user to have to actually click an element on the interface to "drill in" the action that clicking here does the thing.

So we may highlight an "add item to list" button with the instruction "click here to add an item" (with no 'next' button on the tutorial pane), they click it, opening the new item interface and we can continue to lead them through the various setting for adding an item.

The alternative to is programatically 'click' the button for them which isn't as memorable as them doing the action themselves.

If you need an example of how this is acheived, the package introjs has this ability. I don't personally like their default UI over this package however (haven't looked into styling quite yet).

[CallMeChero]

It is possible to click through the target. You'll need to set style="z-index: 9998;". For example, you have 4 steps on same page, then check on which step is currently active are and set z-index of HTML element dynamically with ngStyle or ngClass. I'm just implementing it at the moment so I'll probably post whole solution after I'm finished.

[saschwarz]

I found adding this to global.scss made buttons clickable through the joyride background on desktop Chrome/Safari and iOS Safari:

.backdrop-container {
  pointer-events: none !important;
}

[muller93]

If you want click just the highlighted content. Not too clear solution, but it works.

.backdrop-container { pointer-events: none !important; .backdrop-left, .backdrop-right, .backdrop-top, .backdrop-bottom { pointer-events: all !important; } }