Question

我正在使用intro.js来设置我的网站之旅，我想设置工具提示的默认位置（当没有附加到任何元素时）靠近页面顶部而不是垂直中心。

看起来没有直接设置它的选项，但有没有办法改变CSS？（或者通过编辑来源，尽管这是最后的手段）。

Answer 1

我需要做类似的事情。不优雅，但它有效。

在API文档中，有onafterchange方法。给它一个回调函数，每次显示一个步骤时它都会被触发。

如果工具提示有目标元素，则回调的参数包含该元素。如果工具提示没有元素，则参数包含具有类 introjsFloatingElement 的元素。因此，您只需要检查该元素是否存在该类。如果是，您可以调整工具提示元素的样式。

var help = introJs();
help.onafterchange(function(targetEl){
    targetEl = jQuery(targetEl);

    // check if it's a floating tooltip (not attached to an element)
    if(targetEl.hasClass('introjsFloatingElement')){

        // adjust the position of these elements
        jQuery('.introjs-tooltipReferenceLayer').offset({top : 120});
        jQuery('.introjs-tooltip').css({
            opacity: 1,
            display: 'block',
            left: '50%',
            top: '50%',
            'margin-left': '-186px',
            'margin-top': '-91px'
        });
        jQuery('.introjs-helperNumberLayer').css({
            opacity: 1,
            left: '-204px',
            top: '-109px'
        });
    }
});

// add your steps
// ...

help.start();

注意：

我第一次尝试onbeforechange，但这不起作用。不确定原因。
首先，我尝试仅调整 introjs-tooltipReferenceLayer 元素，但嵌套元素（ introjs-helperNumberLayer 和 introjs-tooltip ）没有在第一次显示器上正确定位。我不得不在后续显示器上检查这些元素以获得合适的样式。
使用intro.js 2.5.0进行测试。元素类不是api规范的一部分，所以我不知道这个解决方案的前瞻性。

Answer 2

我查看了intro.js文档。你应该能够将这行代码添加到你的脚本中。

introJs().setOption("tooltipPosition", "top");

更改默认的intro.js工具提示位置

2 个答案: