Skip to content

Embed URL

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Joyride 2 Pause and Resume Example

The below configuration will pause the tour after tooltip 2 has appeared (index of 1). In the postStepCallback we check to see if the tour has been paused and fire some code.

<script>
  $(window).load(function() {
    $('#joyRideTipContent').joyride({
      pauseAfter : [1],
      postStepCallback : function (index, tip) {
        if ($(this).joyride('paused')) {
          console.log('Hey there, you\'ve paused the tour.');
          // fire your code here
        }
      }
    });
  });
</script>

When our code has finished executing we can fire $(window).joyride('resume'); and the tour will continue.

@Quae

The documentation claims that pauseAfter takes in an array, but I'm unable to get it functioning. Could you perhaps add an example with multiple tips being paused?

Thanks for this example, regardless! It certainly helped in getting stuff put together in the first place.

@bombarie

These commands and how to trigger them are SUPER useful. Maybe it's just me but in this project's main page I read over this many times before it caught my eye. This is really a great feature and its presence isn't so readily apparent.

@sumitii

This does not work for the resume function. Any way to fix? I've tried a couple different things to get my tour to restart but no luck so far. Please help, thanks!

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Something went wrong with that request. Please try again.