更改默认介绍.js工具提示位置

Question

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

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

Answer 1

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

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

如果工具提示具有目标元素，则回调的参数包含该元素。如果工具提示没有元素，则参数包含具有类 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();

注意：

• 我第一次尝试之前更改，但这不起作用。不知道为什么。
• 起初，我尝试仅调整introjs-tooltipReferenceLayer元素，但是嵌套元素(introjs-helperNumberLayer和introjs-tooltip)在首次显示时没有正确定位。我不得不在随后的显示器上检查这些元素以获得正确的样式。
• 使用介绍进行测试.js 2.5.0。元素类不是 api 规范的一部分，所以我不知道这个解决方案有多面向未来。

Answer 2

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

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