Flexible jQuery Website Tour Plugin - Trip.js

Flexible jQuery Website Tour Plugin - Trip.js

Trip.js is a jQuery plugin that helps you create a customizable and skinable website tour with an auto step-by-step guide for introducing tutorial and new features for your visitors.


  • Easy to use
  • Lots of options and methods to customize your website tour
  • Ability to navigate with the mouse, or the keyboard
  • Callback events supported

See also:

Basic Usage:

1. Include jQuery javascript library and jQuery Trip.js on your website

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="src/trip.min.js"></script>

2. Include required jQuery Trip.js stylesheet to style the plugin

<link type="text/css" rel="stylesheet" href="src/trip.min.css">

3. The javascript

var trip2 = new Trip([
    { sel : $(".demo-basic-2.step1"), content : "North", position : "n" },
    { sel : $(".demo-basic-2.step2"), content : "East",  position : "e" },
    { sel : $(".demo-basic-2.step3"), content : "South", position : "s" },
    { sel : $(".demo-basic-2.step4"), content : "West",  position : "w" }
], {
    tripTheme : "white",
    onTripStart : function() {
        $("body").css({ "background-color" : "#eee" });
    onTripEnd : function() {
        $("body").css({ "background-color" : "#fff" });
$(".start-demo-basic-2").on("click", function() {

4. Available configurations.

// basic config
tripClass: '',
tripIndex: 0,
tripTheme: 'black',
backToTopWhenEnded: false,
overlayHolder: 'body',
overlayZindex: 99999,
delay: 1000,
enableKeyBinding: true,
enableAnimation: true,
showSteps: false,
showCloseBox: false,
showHeader: false,
skipUndefinedTrip: false,
// navigation
showNavigation: false,
canGoNext: true,
canGoPrev: true,
// labels
nextLabel: 'Next',
prevLabel: 'Back',
finishLabel: 'Dismiss',
closeBoxLabel: '&#215;',
header: 'Step {{tripIndex}}',
// callbacks for whole process
onStart: $.noop,
onEnd: $.noop,
// callbacks for each trip
onTripStart: $.noop,
onTripEnd: $.noop,
onTripStop: $.noop,
onTripPause: $.noop,
onTripResume: $.noop,
onTripChange: $.noop,
onTripClose: $.noop,
// animation
animation: 'fadeIn',
// customizable HTML
tripBlockHTML: [
  '<div class="trip-block">',
    '<a href="#" class="trip-close"></a>',
    '<div class="trip-header"></div>',
    '<div class="trip-content"></div>',
    '<div class="trip-progress-wrapper">',
      '<div class="trip-progress-bar"></div>',
      '<a href="#" class="trip-prev"></a>',
      '<a href="#" class="trip-next"></a>',

5. API methods.

  • trip.start(): start your trip
  • trip.stop(): stop your trip
  • trip.pause(): pause / resume your trip ( same as trip.resume() )
  • trip.resume(): pause / resume your trip ( same as trip.pause() )
  • trip.next(): jump to next step
  • trip.prev(): jump back to previous step

Change logs:


  • Fix Doble Body Tag Bug

v3.3.3 (2016-08-05)

  • fixed the regression issue

v3.3.1 (2016-08-04)

  • fixed blinking expose problem

v3.3.0 (2016-07-11)

  • changed some DOM structures
  • changed CSS specificity to make it simpler
  • changed canGoPrev() and canGoNext() logics
  • next(tripIndex) now will ignore canGoNext() check

v3.2.2 (2016-07-07)

  • fixed callback scope, all bound to trip itself, so you can use this.next() API in your tripObject
  • fixed arrow color for all themes

v3.2.1 (2016-07-04)

  • added TripConstant model
  • added a new theme called minimalism
  • added tripClass settings so that users can add extra class on it for more customization works
  • showed prev button even if users are on the first step

v3.2.0 (2016-07-02)

  • added data-trip-step class on trip-block so that devs can do more controls in CSS.
  • added skip button (and skipLabel settings)
  • added steps UI (and showSteps settings)
  • updated existing styles to make it work better with steps UI
  • changed default animation to fadeIn
  • changed themes strucutre to make it neat
  • renamed .trip-progress-wrapper to .trip-navigation

v3.1.8 (2016-07-01)

  • Fixed wrong configuration in UMD which makes Trip.js can't be used in AMD

v3.1.6 (2016-02-17)

  • Fixed wrong configuration in UMD which makes Trip.js can't be used in AMD
  • nextClickSelector should not be triggered after trip is stopped


  • v3.1.5: added data-trip-expose option in parser mode


  • v3.1.4: Added fadeIn() / fadeOut() to animate overlay


  • bugfix
  • v3.1.2


  • bugfix
  • v3.1.1


  • Fixed if there is deferred object passing back in onTripEnd, we will keep waiting until it is resolved before going to the next step
  • v3.1.0


  • right now we can delegate click to differnt element


  • v3.0.0


  • we now can break trip.js into smaller components


  • added dark theme


  • fixed onTripEnd never called when going backwards, add onTripEnd on prev()


  • Ability to expose other element then the selected

v2.0.2 (2014-09-17)

  • major update.

v2.0.1 (2014-07-20)

  • major update.

v2.0.0 (2014-07-04)

  • major update.

v1.3.1 (2014-03-05)

  • add travis support

v1.3.0 (2014-02-24)

  • added animation support

v1.2.4 (2013-11-06)

  • updated to the latest version.

This awesome jQuery plugin is developed by EragonJ. For more Advanced Usages, please check the demo page or visit the official website.

  • Publication date: 10.01.2018
  • Source