Incorrect Positioning of Tooltip

[alizeh-n0name]

Description

I am using Intro js React wrapper in my project but initially, the .introjs-helperLayer and .introjs-tooltipReferenceLayer are positioned incorrectly, so much so that they are not visible on the screen. The CSS left attribute is set incorrectly.

Expected Behavior

Tooltip should be at the correct position

Actual Behavior

Tooltip is not visible on the screen

Errors and Screenshots (optional)

As you can see, the overlay is visible but the tooltip is not.

The LEFT attribute is set incorrectly:

Example (recommended)

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

Environment (optional)

React: v18.2.0
Node: v18.18.0
IntroJs React: v1.0.0
Chrome: v 119.0.6045.123

[alizeh-n0name]

Upon further investigation, I found someone to be facing a similar issue but no solutions were provided, in fact, the issue was marked as stale.
#1502

[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'
              });
            }

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