intro.js Tooltip breaks out of viewport

Description

The tooltip breaks out of viewport e.g. iPhone 5/SE.

Expected Behavior

The tooltip position has to be recalculated to fit into the used viewport.

Actual Behavior

The rendered tooltip under my button is not rendered correctly in the middle of the used viewport under the highlighted icon.

Errors and Screenshots

Environment

Browser: Chrome Intro.js version: 3.4.0 OS: MacOS Catalina 10.15.7 JS Libraries: jQuery 3.6.0

May 24 '21 13:05 danielcastrobalbi

I meet it too, I hope author can solve this problem.

Jun 11 '21 06:06 FlashWo1f

Thanks for flagging. I suppose this only happens in mobile devices?

Jun 12 '21 08:06 afshinm

Hello @afshinm!

Thank you for your fast reply, yes it happens only in mobile devices, desktop has no problems.

Jun 12 '21 08:06 danielcastrobalbi

Understood. Could you create an online demo for me please? a simple jsfiddle/codesandbox would help me to debug this faster.

Jun 12 '21 08:06 afshinm

Hello @danielcastrobalbi ! I have the same issue, also only in mobile, also really interested in its resolution.

@afshinm, at JOGL where I work, our code is open source. To have a demo of the problem, you can clone the front end here and refer to this MR to know what branch to go to and how to trigger the tour on mobile.

Jun 19 '21 10:06 juliettebeaudet

@juliettebeaudet thanks. could you please create a codesandbox for me please? I just need a way to inspect and debug the issue.

Jun 19 '21 10:06 afshinm

@juliettebeaudet thanks. could you please create a codesandbox for me please? I just need a way to inspect and debug the issue.

Hey @afshinm , thanks for your quick answer. What do you need exactly on this codesandbox?

If it is to reproduce my exact issue, it is near impossible on a simple codesandbox, because the tour depends on the elements it highlights, on multiple pages, and the fact that the tooltip goes outside on mobile for a few tooltips (does not seem random, are always the same in different pages) could depend on the exact style & position situation of the chosen elements.

I tried to play a bit with the custom css of the tooltips but the position is so off that you cannot just play with margin or padding to get it right. As for the "position" option tour of the tooltip, it gets overrided by the automatic understanding of the lib of where it should go.

Tell me how I can best help you solve this and I will.

Jun 19 '21 10:06 juliettebeaudet

I give every step's tooltipClass to fix the style that avoid exceeding the interface.

Jun 21 '21 09:06 FlashWo1f

Hey @FlashWo1f , thanks for contributing to the issue! I would love to receive more details / examples of the style you apply to the tooltips, would you mind? In my case, the tooltips go so off (half off-screen) that it seems that reducing their width, margin etc is ont enough to do the trick.

Jun 21 '21 10:06 juliettebeaudet

that's fine. I found this way( set tooltipClass ) in the souce code. set .this-step-tooltipclass style what you want

{
    ...commonOptions,
    steps: [
          {
               intro: 'intro description',
               element: '.element',
               tooltipClass: '.this-step-tooltipclass'
          }
    ]
}

Have I described it clearly?

Jun 21 '21 11:06 FlashWo1f

@FlashWo1f , thanks man. I actually already styled the tooltips using the tooltipClass, that's indeed super useful! But I was interested also in knowing if you solved cases of tooltips totally off, just by adding style, and if yes, with what style exactly (is there a super secret I should know, beyond changing global size and margins? Here it does not seem enough). Thanks!

Jun 21 '21 11:06 juliettebeaudet

@juliettebeaudet , yep, just by adding style. using position & top & left to adjust the element's position. Not the super secret, lol XD

Jun 21 '21 13:06 FlashWo1f

I'm happy to look into this issue but I couldn't reproduce it myself. If someone reproduce this issue on codesandbox I'm more than happy to send a patch asap.

Jun 22 '21 07:06 afshinm

@afshinm, maybe this is the wrong place to ask. But we are also facing positioning issues from time to time, as are others apparently.

Since the open source version of this library is AGPL I'm not a 100% positive if this would be compatible, but there are libraries which solve the positioning problem, like popper.js. Would that be a viable alternative to trying to do something similar (or even exact same thing, depending on the use case) in this library? Quite a few libraries use it to solve this problem in their code base.

Jun 22 '21 11:06 aried3r

@afshinm Sorry for responding so late.

In a clean jsfiddle I can't reproduce the error, maybe it is interesting for you to have a look directly in my staging system?

I got an instance running, if needed, I could give you some credentials, trigger me here if this is a possible solution.

Jun 22 '21 12:06 danielcastrobalbi

I get the same error and its quite simple to reproduce. I'm going to see if there are events I can listen to adjust the positioning of the tooltip myself. But I'd love to see this fixed "natively" in this module.

Here's a codepen demonstrating the issue. All you have to do to get the issue to occurs is position one of the steps near the right edge of the screen.

https://codepen.io/tvanc/pen/gOWwaMQ

Edit: Here be a screenshot of said codepen