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

Question

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

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

Answer 1

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

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

Answer 2

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

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

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

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 测试。元素 classes 不是 api 规范的一部分，所以我不知道这个解决方案的前瞻性如何。

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

Changing the default intro.js tooltip placement

html

javascript

css

intro.js