有没有办法设置 Intro.js 来更改一个元素上的工具提示位置而不是全部？答案

【问题标题】：Is there a way to set Intro.js to change the tool tip position on one element instead all?有没有办法设置 Intro.js 来更改一个元素上的工具提示位置而不是全部？
【发布时间】：2015-06-26 17:04:30
【问题描述】：

这是我目前所拥有的：

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

enter code here(必发帖)

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

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

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

有什么想法吗？

【问题讨论】：

你应该在这里更清楚地详细说明问题。
在每个步骤中，都会弹出一个框来解释该特定元素。该框的默认位置在底部。我希望位置一个元素是正确的，其余的可以在底部。例如，在第 3 步中，我希望该框显示在右侧。
更多关于此的内容 - stackoverflow.com/questions/17150318/… - 如果有帮助的话。除非我不能让它工作。
更新小提琴：jsfiddle.net/urccLq2u/4

标签： jquery intro.js

【解决方案1】：

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

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

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

感谢 Renzo 看帖！

【讨论】：

【解决方案2】：

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

如果您设置选项步骤，您将更容易理解和管理代码，您甚至可以在同一页面上拥有多个 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() 即可启动您需要的序列

【讨论】：