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

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");