工具提示出现在 intro.js 移动视图中的元素上方答案

【问题标题】：Tooltip appears over the element in intro.js mobile view工具提示出现在 intro.js 移动视图中的元素上方
【发布时间】：2018-05-08 10:04:07
【问题描述】：

我正在使用 intro.js 对我网站上的页面进行初步浏览。导览在桌面上看起来不错，但在移动设备上，工具提示出现在它所描述的元素的正上方。用户无法在移动视图中看到该元素，因为工具提示出现在元素的正上方。见下图：

我尝试自定义工具提示的位置，但输出保持不变。给出了我用来自定义位置的脚本：

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

另外，我看不到工具提示上方的数据步数。桌面版不存在此类问题。

有人可以解释一下问题是什么吗？提前致谢！

【问题讨论】：

标签： javascript html css intro.js

【解决方案1】：

2.5.0版本的源码说明：

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

如果您希望自定义工作，请尝试在每个步骤项中设置 position 字段为 auto，因为默认位置设置为 bottom。

例如：

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

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

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

【讨论】：

【解决方案2】：

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

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

【讨论】：