Tour

Tour

Hopscotch is a Javascript library . Hopscotch accepts a tour JSON object as input and provides an API for the developer to control rendering the tour display and managing the tour progress.

Start the Tour

Create your own tour


                                // Define the tour!
                                var tour = {
                                  id: "hello-hopscotch",
                                  steps: [
                                    {
                                      title: "My Header",
                                      content: "This is the header of my page.",
                                      target: "header",
                                      placement: "right"
                                    },
                                    {
                                      title: "My content",
                                      content: "Here is where I put my content.",
                                      target: document.querySelector("#content p"),
                                      placement: "bottom"
                                    }
                                  ]
                                };

                                // Start the tour!
                                hopscotch.startTour(tour);