JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//cdnjs.cloudflare.com/ajax/libs/intro.js/1.0.0/intro.min.js"></script>
<link rel="stylesheet" href="http://usablica.github.io/intro.js/introjs.css">
<p><a href="#" id="tutorial" data-step="1" data-intro="Let's start the tutorial!">Start</a></p>
<ul id="test">
    <li data-step="2" data-intro="Here's Step 1">Step 1</li>
    <li data-step="3" data-intro="Here's Step 2">Step 2</li>
    <li data-step="4" data-intro="Here's Step 3">Step 3</li>
    <li data-step="5" data-intro="Here's Step 4">Step 4</li>
    <li data-step="6" data-intro="Here's Step 5">Step 5</li>
</ul>

CSS

#test li {
    display: inline;
    padding: 20px;
}

JavaScript

/*
Can someone help me out with a jquery plugin - intro.js. I'm trying to change the tooltip position on one of the steps. Any ideas?
*/

/* This is an example I want to have on ONE element
$('#tutorial').on('click', function() {
    introJs().setOptions({ 
        'tooltipPosition': 'right'
    }).start();
});
*/


/* Here's what I have so far and not sure how to implement it */
$('#tutorial').on('click', function () {
    introJs().onchange(function (target) {
        if ($(target).attr('data-step') == 3) {
            alert('In the next position (Step 3), the box should be right, but it is on the bottom. How can I get this box to position right?');
            this.setOptions({
                'tooltipPosition': 'right'
            });
        }
    }).start();
});