ChardinJS walkthrough not working for MVC?

Question

I have an MVC Page with a few functionalities and I'm using ChardinJS plugin to give a demo to the user. It works fine for just overlay text, but I wanted to give a walk through demo using the same.

I just cannot make the refresh option work as I like it to be.

$('a[data-toggle="chardinjs"]').on('click', function (e) {
    $('body').chardinJs('stop');
    $('.switchChardin').attr('data-intro', 'blah blah blah');
    $('.switchChardin').attr('data-position', 'right');
    $('body').chardinJs('start');
});

I want to have this change instantly applied, in order to give the user a walk through.

The attribute does get added but it reflects the next time Chardin is started.

I have also tried using refresh(with no luck)

$('a[data-toggle="chardinjs"]').on('click', function (e) {
    $('.switchChardin').attr('data-intro', 'blah blah blah');
    $('.switchChardin').attr('data-position', 'right');
    $('body').chardinJs('start').refresh();
});

and

$('a[data-toggle="chardinjs"]').on('click', function (e) {
    $('.switchChardin').attr('data-intro', 'blah blah blah');
    $('.switchChardin').attr('data-position', 'right');
    var ChardinTest = $('body').chardinJs('start');
    return (ChardinTest.refresh());
});

none of them work.