2

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 user cannot see the element in mobile view as tool-tip appears right above the element. See image below:

enter image description here

I tried customizing the postitions of tool-tip but the output remains the same. The script that I used to customize the position is given: 

var tour = introJs();
tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right']);

Also, I cannot see the numbers of data-steps above tool-tip. No such problem exists on Desktop version.

Can someone please explain what the issue is? Thanks in advance!

Yesha
  • 648
  • 1
  • 7
  • 29

2 Answers2

4

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;
    }
}
Yesha
  • 648
  • 1
  • 7
  • 29
1

The source code for the 2.5.0 version states:

/* Precedence of positions, when auto is 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.

Marian Tarlungeanu
  • 313
  • 1
  • 12