Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Incorrect Positioning of Tooltip #2027

Open
alizeh-n0name opened this issue Nov 8, 2023 · 4 comments
Open

Incorrect Positioning of Tooltip #2027

alizeh-n0name opened this issue Nov 8, 2023 · 4 comments

Comments

@alizeh-n0name
Copy link

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.

image

The LEFT attribute is set incorrectly:
image

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
Copy link
Author

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
Copy link

chiranjeeviga commented Dec 9, 2023

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

Copy link

stale bot commented Mar 13, 2024

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.

@stale stale bot added the wontfix label Mar 13, 2024
@jasekiw
Copy link

jasekiw commented May 23, 2024

I was able to fix the popup being in the wrong position in my case via my comment here

@stale stale bot removed the wontfix label May 23, 2024
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

3 participants