Tooltip positioning in body is wrong when using fixed navbar

[abuzakaria]

When using a navigation bar with bootstrap's navbar-fixed-top, intro.js tooltips are wrongly positioned.

[haszsm]

I am having a similar issue. Please see fiddle: https://jsfiddle.net/g25my5tf/8/ I have a fixed footer here, but on my development site I have a fixed header. It also causes havoc when a tooltip is at the bottom of the page, and then another one is floating - the page does not scroll up to the top of the page again. Any ideas? (Sorry if I appear to be hijacking the thread!)

[afshinm]

@abuzakaria, @haszsm Hmm, will have a look. Btw share more jsFiddles if you have.

[haszsm]

@afshinm Thank you for your reply! I have also noticed another weird positioning issue. When I have a floating guide after a step, the scroll does not seem to go to the top to show it in the center of the window: https://jsfiddle.net/f1640gep/1/

[dephora]

I too am having issues with fixed elements being pushed from their location and in turn having the toolTip off by an amount equal to the size of the element it just pushed. I have temporarily resolved this by overriding the following to ...

.introjs-fixedTooltip {
   position: absolute;
}

.introjs-fixParent {
  position: static;
}

This will leave the elements in place and the introjs-fixedToolTip is only slightly off at that point which can be modified for that particular step.

[rossberenson]

I encountered a similar issue as well. Mix temp fix was to add a class to the body when the tour is active. With that class, I targeted position:fixed elements and changed it to position:absolute. I know the plugin does this with the classes that are assigned to the objects BUT I noticed when I had these divs absolute, the plugin measured accurately. The position of the tool tip is in the correct position, and so is the highlighted object. Prior to this temporary fix, majority of things were off by 60px which is the height of my fixed header.

[mataps]

any updates on this?

[qiuchunhong]

@afshinm Is there any solution to the first question?

[millerscout]

@qiuU i don't think it's a problem on intro.js itself.

this happens because the intro.js is positioning the intro at the DOM element, and exist the navbar the height is ignored.

the fix that i recommend is:

• add the padding-top: {height-of-navbar} on the container/body

if i'm not very clear, i'm sorry but if you need a clear solution show to us a example on your environment so we can work together to fix that

[qiuchunhong]

@millerscout
https://jsfiddle.net/cinderello/b0vebt1w/0

in chrome

[qiuchunhong]

right: wrong:

[qiuchunhong]

@millerscout , @afshinm Waiting for your reply

[assassin128]

@qiuU : same problem, please help me

[sekys]

Same problem. IntroJs.refresh() function helps me.

fixToolbar = function (el) {
        if (el == undefined) {
            return;
        }
        var elTop = el.getBoundingClientRect().top - document.body.getBoundingClientRect().top;

        window.addEventListener('scroll', function () {
            if (document.documentElement.scrollTop > elTop) {
                el.style.position = 'fixed';
                el.style.top = '0px';
                el.style["z-index"] = '3';
                if(window.intro != undefined) {
                    window.intro.refresh();
                }
            } else {
                el.style.position = 'static';
                el.style.top = 'auto';
                el.style["z-index"] = '3';
                if(window.intro != undefined) {
                    window.intro.refresh();
                }
            }
        });
    };

[decadehew]

@qiuchunhong

my solved!

.introjs-fixParent {
  position: absolute;
}

[Orlandster]

The problem which caused it for me was the scrolling. The element is fixed in the viewport, but for some reason it scroll to the bottom of the viewport.

So my fix was introJs().setOption("scrollToElement", false);

This works because I'm only using fixed elements.

[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.

[mohsin1993]

This worked for me

.introjs-fixedTooltip {
  position: absolute !important;
}