position -right-aligned not working

[JusuVh]

The step position '*-right-aligned' (and all the aligned position for that matter) is not working at all for me. I checked in you code and there are several things I don't quite understand.

In the _determineAutoAlignment function, you remove the '-right-aligned' possible alignement when offsetLeft < tooltipWidth. This means that if the highlighted element takes up most of the window width (offsetLeft is then small), it's not possible to align to the right, although there is a lot of space to align to the right.

Should the check rather be offsetLeft + winWidth < tooltipWidth ? Meaning, if the highlighted element width + the offset on the left leaves enough room for the tooltipwidth, under the element for example, the '-right-aligned' alignement should be possible.

This should also be changed for 'middle-aligned'.

[Stanley521]

I needed this too, do you have any progress for now? @JusuVh

I tried using setTimeout( function () { $('.introjs-tooltip').addClass('right-position'); }, 350);

.right-position { left: unset !important; right: 15px !important; } it worked, but with a bit delay, any faster delay, introjs will reapply left-aligned

i editted the timeout from 600 to 350, and it worked perfectly now.

[JusuVh]

Hi @Stanley521 , I corrected the issue on my side, simply by changing line 903 on my local intro.js file with

if (offsetLeft + winWidth < tooltipWidth) {

instead of

if (offsetLeft < tooltipWidth) {

If you're not using any framework, you can do the same as a quick fix.

[Stanley521]

I have tried your way and it worked perfectly, the only downside is it doesn't work with npm install.

[JusuVh]

If you want to use it in an angular app, you can copy the script to a folder in your project (e.g. /lib/intro.js/) and then add

"scripts": [
   "src/lib/intro.js/intro.js"
]

to your angular.json file. If you're using another framework, i'm sure there's some other way too.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.