Javascript 工具提示显示在intro.js mobile视图中的元素上方

Javascript 工具提示显示在intro.js mobile视图中的元素上方,javascript,html,css,intro.js,Javascript,Html,Css,Intro.js,我正在使用intro.js对我的网站上的一个页面进行初始浏览。该教程在桌面上看起来不错,但在移动设备上,工具提示显示在它所描述的元素的正上方。用户无法在移动视图中看到该元素,因为工具提示显示在该元素的正上方。见下图: 我尝试自定义工具提示的位置,但输出保持不变。我用来定制职位的脚本如下所示: var tour = introJs(); tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right']); 此外,我看

我正在使用intro.js对我的网站上的一个页面进行初始浏览。该教程在桌面上看起来不错,但在移动设备上,工具提示显示在它所描述的元素的正上方。用户无法在移动视图中看到该元素,因为工具提示显示在该元素的正上方。见下图:

我尝试自定义工具提示的位置,但输出保持不变。我用来定制职位的脚本如下所示:

var tour = introJs();
tour.setOption('positionPrecedence', ['top', 'bottom', 'left', 'right']);
此外,我看不到工具提示上面的数据步骤数。桌面版本上不存在此类问题

有人能解释一下问题是什么吗?
提前谢谢

2.5.0版本的源代码说明:

/* Precedence of positions, when auto is enabled */
positionPrecedence: ["bottom", "top", "right", "left"]
如果希望自定义工作正常,请尝试在每个步骤项中设置 位置字段设置为自动,因为默认位置设置为底部

e、 g:


还可以尝试设置元素属性,该属性从给定选择器上的文档中获取第一个元素。

以下CSS一起帮助我解决了这个问题:

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