Tooltip Appears Over The Element In Intro.js Mobile View

I am using intro.js for an initial tour of a page on my website. The tour looks good on Desktop but on mobile, the tool-tip appears right above the element it is describing. The us

Solution 1:

Together, the following CSS helped me solve the issue:

@media (max-width: 500px) { 
    .introjs-helperNumberLayer{
        left: 0px!important;
        top: -10px!important;
    }
    .introjs-tooltip{
        margin-top: 40px!important;
    }
}

Solution 2:

The source code for the 2.5.0 version states:

/* Precedence of positions, whenautois enabled */
positionPrecedence: ["bottom", "top", "right", "left"]

If you want your customization to work try setting in each step item the position field to auto as the default position is set to bottom.

e.g:

tour.setOption('steps', [
    {
      intro: '...'
      position: 'auto'
    }
])

tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right'])

Also try to set the element property which takes the first element from the document on the given selector.