Question

这是我到目前为止所拥有的：

http://jsfiddle.net/urccLq2u/4/

enter code here（需要发布）

默认工具提示位置设置为底部。

在第一个代码中，我将工具尖端位置向右更改，以显示右侧工具尖端的示例。

在第二个代码中，我尝试将工具提示位置中的一个步骤更改为右边，但它没有改变。

有什么想法吗？

Answer 1

http://jsfiddle.net/urccLq2u/6/

我修好了。我只需要将data-position="left"添加到我想要定位的html元素中。

应该仔细查看有关属性的文档：https://github.com/usablica/intro.js/blob/master/README.md。

感谢Renzo查看帖子！

Answer 2

虽然数据位=“左” 确实有效，我发现在HTML中嵌入所有元信息会让人更难理解正在发生的事情，并且还会在工具提示中嵌入更多“冒险”代码，例如视频播放，真的很丑陋且难以理解。

如果你使用setOptions步骤，你会更容易理解和管理代码，甚至可以在同一页面上有多个intro.js序列。

var intro1 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro1_step1',
            intro: 'Welcome to your example.com dashboard, where you can update your skills, your availability, and your professional details so that ...',
            position: 'top'
        },            {
            element: '#intro1_step2',
            intro: 'Your profile contains important information which is important to complete so that...',
            position: 'bottom'
        },
        {
            element: '#intro1_step3',
            intro: 'Make sure your attribute is included in your profile because the client may express a preference.',
            position: 'top'
        },
        {
            element: '#intro1_step4',
            intro: 'Click here to add a photograph of yourself.',
            position: 'top'
        },
        {
            element: '#intro1_step5',
            intro: 'Your photograph will appear when your profile matches a ...',
            position: 'top'
        },
        {
            element: '#intro1_step6',
            intro: 'Take example.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});
var intro2 = introJs();
intro1.setOptions({
    tooltipPosition : 'top',
    steps: [
        {
            element: '#intro2_step1',
            intro: 'Welcome to your example2.com dashboard, where...',
            position: 'top'
        },            {
            element: '#intro2_step2',
            intro: 'Your...',
            position: 'bottom'
        },
        {
            element: '#intro2_step3',
            intro: 'Make sure...',
            position: 'top'
        },
        {
            element: '#intro2_step4',
            intro: 'Click here to...',
            position: 'top'
        },
        {
            element: '#intro2_step5',
            intro: 'In this step...',
            position: 'top'
        },
        {
            element: '#intro2_step6',
            intro: 'Take example2.com with you, on your Android or Apple phone by clicking here.',
            position: 'top'
        }
    ]
});

只需使用intro1.start（）和intro2.start（）来启动您需要的序列

有没有办法设置Intro.js来改变一个元素上的工具尖端位置而不是全部？

2 个答案: