intro.js tooltip position not set correctly on initial page render

[DRD161]

Description

After setting up intro.js in a Blazor project I am working on and everything seems to work fine except for when the page initially renders, step 1 shows the tooltip positioned way above the element. Once the viewport is changed or the next button is clicked the position then functions as it should. On page render I can see that the CSS top attribute is set to 143px and once the viewport changes or the next button is clicked top is then set to 238px for all steps and display correctly.

Expected Behavior

Tooltip should be properly positioned on page render.

Actual Behavior

Tooltip is incorrectly positioned on initial page render.

Errors and Screenshots (optional)

Currently using version 2.5.0, (this code was copied over from another project), but this also occurs after updating the intro css and js to version 4.3.

Before viewport change or next button click

After viewport change and next button click

Example (recommended)

Intro.js has been set up using the default settings. No custom CSS changes have been made.

Environment (optional)

Version - Intro.js version 2.3
Browser - Edge & Firefox
Environment - .Net 5 & Blazor

[stale]

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.

[milidubey]

Hi Dylan,

Were you able to find a solution? I'm facing a similar issue but with hints instead of steps.

[sammuell]

I have this issue, too. Occurs not in Firefox, only in Chrome. In my case, the tooltip is not visible at all because the 'top' style property is -1100 px

[akfoury]

I wonder if they use an automatic software to label this issue as wontfix otherwise I don't understand why they did this on a issue that I personnally find critical.

[chiranjeeviga]

I was facing the same issue. I wanted tool tip to appear on top, but the first step position was not working. While debugging, found that top:50% was set and when removed or set to 0%, the tool tip moved to the top. I have used JS to fix it programmatically. This will set top: 0% after the tool tip is created, hence window.scroll is used to move the page up. You can index accordingly.

// Function to adjust the tooltip position for step 1
function adjustTooltipForStep1() {
    var tooltip = document.querySelector('.introjs-tooltip');
    if (tooltip && tour._currentStep === 0) { // Check if it's step 1
        tooltip.style.top = '0%';
        tooltip.style.marginTop = '0px';
    } else if (tooltip) {
        // Reset the styles for other steps
        tooltip.style.top = '';
        tooltip.style.marginTop = '';
    }

tour.onafterchange(function(targetElement) {
            adjustTooltipForStep1();
            if (tour._currentStep ===0) {
              window.scroll({
                top: 0,
                left: 0,
                behavior: 'smooth'
              });
            }

[jasekiw]

I was able to fix this or similar issue by calling .refresh() on the introJS instance. Some movement in the rendering of the html elements caused it to highlight the wrong spot and .refresh() has to be called for it to check the position of the element. In my case I was using react so I created a useEffect with a dependency array that changes on every render so that it calls .refresh every time react renders allowing any layout changes to be picked up by introJS. (i did not use the introjs react package as it is very out of date).