使用Intro.js时，如何调整特定步骤的工具提示样式

How do I adjust the style of the tooltip for specific steps when using Intro.js

本文关键字：样式 工具提示 调整 js Intro 何调整 使用      更新时间：2023-09-26

我正试图更改第一步（data-step="1"）的样式，并通过调用onbeforechange() 来实现

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //change CSS styling only for the first box
            $(".introjs-helperLayer .introjs-tooltip").attr("style", "margin-left: 10%");
        break;
    }
}).start();

从本质上讲，我试图将工具提示放在第一步的中心。任何帮助都将不胜感激；我在JavaScript方面几乎是个新手。

尝试使用以下代码：

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //change CSS styling only for the first box
            $(".introjs-helperLayer").css("text-align", "center");
        break;
    }
}).start();

我设法弄清楚了。事实证明introJs().onbeforechange()无法获取targetElement参数（已报告此错误）。

因此，我使用了introJs().onchange()，并在前后声明了start()函数。如下：

introJs().start();
introJs().onchange(function(targetElement) {
    switch (targetElement.getAttribute("data-step"))
    {
        case "1":
            //Center the tooltip
            $(".introjs-tooltip").css("margin-left", "300px");
        break;
        case "2":
            //Remove margin-left
            $(".introjs-tooltip").css("margin-left", "0");
        break;
    }
}).start();

否则，case"1"的css函数将不会启动。我尝试用case"1"的css函数替换introJs().start()，但没有成功。因此，您将不得不发射start()两次。

不幸的是，我仍然没有弄清楚如何使工具提示准确地位于页面的中心（margin:即使使用后也根本不起作用！important）。很遗憾，但你能做什么？

我希望这对将来的其他人有所帮助。

您可以将一个类添加到该特定步骤的工具提示中。然后，您就可以通过css设置工具提示的样式了。

为此，请将data-tooltipClass="sample-class"属性添加到所需的元素中。

可在以下位置找到接受属性的完整列表：https://github.com/usablica/intro.js#attributes

targetElement.getAttribute("data-step")将返回null，如果您已使用JSON进行步骤初始化。

我有另一个解决方案，你可以应用id而不是step:

introJs().onbeforechange(function(targetElement) {
    switch (targetElement.id)
    {
        case "intendedId":
            $(".introjs-helperLayer").css("text-align", "center");
        break;
    }
}).start();

如果您仍然想知道使用JSON对象进行初始化时的当前步骤，下面是我使用的方法：

var intro = introJs();
            intro.setOptions({
                steps: [
                    {
                        intro: "Text1"
                    },
                    {
                        element: document.querySelector(".leg"),
                        intro: "text2",
                        position: 'bottom'
                    }
                ]
            });
    intro().onbeforechange(function(targetElement) {
        var stepNumber = 0;
        for (var i=0; i < intro._options.steps.length; i++) {
            if (intro._options.steps[i].element == targetElement)
                stepNumber = i;
            }
        switch (stepNumber)
        {
           case "1":
             //change CSS styling only for the first box
             $(".introjs-helperLayer").css("text-align", "center");
            break;
        }
    }).start();
相关文章：