Really cool tool! - lil Bug while quicktesting

[Fefke]

I just discovered tourguide.js on the TL;DR newsletter and I'm really looking forward to use it. The only manko I have found so far is the dialog leaving the visibility area on mobile devices if it's pointing on an area/element bigger than the screen itself. So I wonder if you @sjmc11 or some co-creator is already onto it, otherwise I might consider fixing it by myself ✌️

[sjmc11]

I just discovered tourguide.js on the TL;DR newsletter and I'm really looking forward to use it. The only manko I have found so far is the dialog leaving the visibility area on mobile devices if it's pointing on an area/element bigger than the screen itself. So I wonder if you @sjmc11 or some co-creator is already onto it, otherwise I might consider fixing it by myself ✌️

Hi @Fefke

Good spot! Currently the tour dialog tries to position at the least above or below the target element if it occupies the screen total width.

If it occupies the entire height then you do have to scroll and will position outside the visible area. I will do some tests to double check the issue.

Initial thoughts are it may be possible to support another step parameter called something like "allow-target-overlap". This would allow the dialog to be positioned over the target element which I think would be useful in the edge case you've raised.

[maniruzzamanak]

@sjmc11 I'm facing the similar issue for almost full-screen page and that's not only a mobile screen issue.

Have you planned to do that with new step parameter - "allow-target-overlap" @sjmc11 ?

[sjmc11]

Hi @Fefke @maniruzzamanak

allowDialogOverlap is now a supported option for configuring the tour. It should resolve this issue and will allow the dialog placement to overlap the target if required.

The option is a global configuration and not per-step.

Available in v0.0.15 on NPM.

[ManiruzzamanAkash]

Thanks @sjmc11 Seems, is good for now.

Maybe in the future, there could be a possible option to add a target like dialogOverlapTarget which will focus on the overlap target element and that parameter would be added in steps data

[sjmc11]

@maniruzzamanak

How dialogOverlapTarget would differ from the standard target?

If you can describe this in more detail, sure it can be supported.

[ManiruzzamanAkash]

In the attachment, you can see that the dialog arrow doesn't focus on any specific element if it falls on the allowDialogOverlap case. It just stays in the middle.

I was suggesting that case, we could give another optional target in steps data, where the arrow or dialog could focus like the attachment.

[sjmc11]

I see what you mean, good idea.

I'll implement this when I have the available time.

[sjmc11]

@ManiruzzamanAkash - I was able to take a quick look and implement a dialogTarget option on the step config.

This essentially allows you to override where the dialog should target its positioning for this kind of use case.

It's a little more difficult to detect when the overlap occurs and conditionally apply a secondary target.

If no dialogTarget is set or not found in the DOM, the default target is used.

Available in v0.0.16 on NPM.

[ManiruzzamanAkash]

Awesome, so fast. Thanks @sjmc11 for this feature enabled.