Slider-style Guided Tour In Vanilla JavaScript – tourguide.js

Category: Javascript , Recommended | February 15, 2023
Views Total:536 views
Official Page:Go to website
Last Update:February 15, 2023


Slider-style Guided Tour In Vanilla JavaScript – tourguide.js


tourguide.js is a JavaScript library which helps you create an interactive, step-by-step tour to guide your visitor through new features and highlighted content on the app.

Click the arrow button to advance to the next step of the tour. Click the pagination bullets to go to the specific step of the tour.

More features:

  • Smooth scrolls the page to the current step.
  • Auto scrolls the page to the original position when the tour is finished.
  • Allows you to load steps from an external data source.
  • Image preload.
  • Compatible with vanilla JavaScript, Angular, React and Vue.js.
  • Lots of options, methods, events.

How to use it:

To get started, insert the stylesheet tourguide.css and JavaScript tourguide.js into the document.

<link rel="stylesheet" href="tourguide.css">
<script src="tourguide.min.js"></script>

Initialize the tourguide.js and create a new tour instance.

var myTour = new Tourguide();

Define steps in the data-tour attribute.  Available properties:

  • step: step index
  • title: step title
  • content: step content
  • image: step image (optional)
  • actiontarget: action target (optional)
<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>

Start the tour and done.


You can also config the tourguide.js to load step data from a JSON file.

// data.json
    "selector": "Select 1",
    "step": 1,
    "title": "Step 1",
    "content": "Step 1 content",
    "image": "1.jpg"
    "selector": "Select 2",
    "step": 2,
    "title": "Step 2",
    "content": "Step 2 content",
    "image": "2.jpg"
    "selector": "Select 3",
    "step": 3,
    "title": "Step 3",
    "content": "Step 3 content",
    "image": "3.jpg"
  // ... 
var myTour = new Tourguide({
    src: "/path/to/json.json"
// or
var steps= []
var myTour = new Tourguide({
    steps: steps

All possible options with default values.

var myTour = new Tourguide({
    root: "body",
    selector: "[data-tour]",
    animationspeed: 300,
    padding: 5,
    steps: null,
    src: null,
    restoreinitialposition: true,
    preloadimages: false,
    colors: {
      fontFamily: 'sans-serif',
      fontSize: "14px",
      tooltipWidth: "40vw",
      overlayColor: "rgba(0, 0, 0, 0.5)",
      textColor: "#333",
      accentColor: "#0d6efd",
      focusColor: "auto",
      bulletColor: "auto",
      bulletVisitedColor: "auto",
      bulletCurrentColor: "auto",
      stepButtonCloseColor: "auto",
      stepButtonPrevColor: "auto",
      stepButtonNextColor: "auto",
      stepButtonCompleteColor: "auto",
      backgroundColor: "#fff",
    keyboardNavigation: {
      "next": "ArrowRight",
      "prev": "ArrowLeft",
      "first": "Home",
      "last": "End",
      "complete": null,
      "stop": "Escape"
    request: {
      "options": {
        "mode": "cors",
        "cache": "no-cache"
      "headers": {
        "Content-Type": "application/json"
    actionHandlers: [], // array of custom step action handlers
    contentDecorators: [], // array of custom step decoration handlers

Callback functions.

var myTour = new Tourguide({
    onStart: function(options){...},
    onStop: function(options){...},
    onComplete: function(){...},
    onStep: function(currentstep, type){...},

API methods.

// starts the tour
myTour.start(2); // starts at step 2
// stops the tour
// goes to the next step;
// backs to the previous step
// goes to a specific step


v1.1.3 (02/15/2023)

  • Bugfix

v1.1.2 (01/09/2023)

  • Feature/step actions
  • Transition to floating-ui library
  • Properly validate step parameters
  • Fix/size of the step preview


  • v1.0.1


  • Rebuilt


  • Make sure we do not fail on empty selector

v0.3.0 (02/01/2021)

  • Correctly parse steps of the tour when from DOM source

v0.3.0 (01/28/2021)

  • Bugfix


  • fixed overlay issues
  • fixed error reporting issue
  • fixed cleaning up issue


  • Fixed: Don’t hide overlay between 2 steps


  • Fixed: Remote JSON src configured tourGuide options as src results in error

You Might Be Interested In:

Leave a Reply