javascript - 更改默认的 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 规范的一部分，所以我不知道这个解决方案的前瞻性如何。