Tour tooltip position inside elements with scroll is wrong

[samiracho]

The way the offsets are calculated doesnt work if the element is inside another element with scroll. I fixed it changing _getOffset function and using "getBoundingClientRect" function (more reliable than the while loop approach)

function _getOffset(element) {
    var elementPosition = {};

    //set width
    elementPosition.width = element.offsetWidth;

    //set height
    elementPosition.height = element.offsetHeight;

    //calculate element top and left
    /* ( Comment old way to get the offsets )
    var _x = 0;
    var _y = 0;
    while (element && !isNaN(element.offsetLeft) && !isNaN(element.offsetTop)) {
        _x += element.offsetLeft;
        _y += element.offsetTop;
        element = element.offsetParent;
    }
    //set top
    elementPosition.top = _y;
    //set left
    elementPosition.left = _x;
    */

    var clientRect = element.getBoundingClientRect();
    elementPosition.top = clientRect.top;
    elementPosition.left = clientRect.left;

    return elementPosition;
}

[roine]

I was having a problem with the position and your code solved it. Thanks!

[peterburjan]

This fix worked for me as well, thank you. Is there any plans to get this merged in?

[Daveslow]

This worked for me as well. I've had to make 3 changes outlined in bug reports to get the framework working properly. Can we get these things merged in?

[leejordan]

I think this would also solve the problem with helperLayer positioning being incorrect when the parent has a border as offsetParent does not seem to take borders into account.

[vinicius-camara]

It's better people start with x and y 0 in position.
Only with this way is possible start the app tour.

//start top of application
window.scrollTo(0,0);
var elementPosition = {};

[alexmgrant]

🍻

[c-johnson]

+1, any canonical answer for this? I had to combine this with the fix described in #350 to get this to work in my application

[c-johnson]

I'm hosting a fork of this at https://github.com/c-johnson/intro.js/blob/master/intro.js if anybody needs to use this as a temporary solution. Combining with #350 above gives me the solution I want. It looks like this possibly addresses concerns raised in #182. Again, this alone didn't fix my problem, I had to combine with manual scrolling behavior to get it to work

[mwager]

Same problem here, any activity on this?

[scottwestover]

I was having the same issue, and your code worked fixed it. Thanks again for sharing it.

[halshing]

I'm using IntroJS with SharePoint Online and was having this exact issue with scrolling to web parts that are further down the page. Replacing the _getOffset method with the one from @samiracho worked! But like @c-johnson mentioned, I had to also include code to force the scroll of the workspace container to the target element. Something like this:

var intro = introJs();
var workspace = document.querySelector("#s4-workspace");
intro.onbeforechange(function (targetElem) {
     workspace.scrollTop = targetElem.offsetTop - workspace.offsetTop;
});

Thanks everyone!

[bozdoz]

I will take a look at this and see if I can get a PR ready for this and #350. Thanks for the help.