Is there a way to set Intro.js to change the tool tip position on one element instead all?

Question

Here's what I have thus far:

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

enter code here(required to post)

The default tool tip position is set to bottom.

In the first code, I change the tool tip position right to show the example of the tool tip positioned right.

In the second code, I attempted to change one of the steps tool tip position to right and it didn't change.

Any ideas?

Answer 1

While data-position="left" does work, I find that embedding all of the meta information in the HTML makes it harder to understand what is going on, and also makes embedding more "adventurous" code in the tooltip, such as video playback, really ugly and hard to understand.

If you setOptions steps you get much easier to understand and manage code, and you can even have multiple intro.js sequences on the same page.

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'
        }
    ]
});

Just use intro1.start() and intro2.start() to kick off the sequence you need

Answer 2

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

I fixed it. I just had to add data-position="left" to the html element I wanted to position.

Should of looked closer at the documentation on attributes: https://github.com/usablica/intro.js/blob/master/README.md.

Thank you Renzo for looking at the post!