工具提示出现在intro.js移动视图中的元素上方 [英] Tooltip appears over the element in intro.js mobile view

问题描述

我正在使用intro.js来初步浏览我网站上的页面.该游览在台式机上看起来不错，但在移动设备上，工具提示显示在所描述元素的正上方.用户无法在移动视图中看到该元素，因为工具提示出现在该元素的正上方.参见下图:

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:

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

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!

推荐答案

以下CSS共同帮助我解决了该问题:

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

这篇关于工具提示出现在intro.js移动视图中的元素上方的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！