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?

On each step, there is a box that pops up explaining that specific element. The default position of that box is on the bottom. I want the position one one element to be right and the rest can be on the bottom. For example, on step 3, I want the box to show on the right. — graphettion, Jun 26 '15 at 17:54
Something more on the lines of this - http://stackoverflow.com/questions/17150318/firing-javascript-function-between-intro-js-steps/17157644#17157644 - if that helps. Except I cannot get that working. — graphettion, Jun 26 '15 at 18:46

score 0 · Answer 1 · answered Jun 26 '15 at 19:52

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!

score 0 · Answer 2 · answered Aug 11 '15 at 12:39

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

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

2 Answers2