Every so often I find a script that really stands out and deserves praise. Hopscotch is one of those scripts, a free tooltip-based website tour script developed by the team at LinkedIn.
We’ve written tutorials on building website tours using free JS plugins. But Hopscotch is a newer type of library that runs on JSON directions.
If you visit the main project page you’ll find a lot more info about Hopscotch.
It’s developed to parse a JSON object and create a custom API for easier page manipulation. This way you can easily change the direction, speed, and behavior of your guided tour.
The entire thing is powered by Vanilla JS so you only need to add 2 specific Hopscotch files: a CSS stylesheet and the JS library. From there you can write your own tour based on simple JSON code that targets which elements to hit, how to structure the tooltip, and how the tour should respond to user input.
To get started have a look at the general usage guide which covers a very basic setup on a simple webpage. Underneath that, you’ll find a whole list of custom options you can add into the JSON object, along with techniques for writing your own callback methods for various user behaviors:
- Starting/stopping the tour.
- Clicking next/prev buttons.
- Handling the tooltip close and skip buttons.
Either way, Hopscotch is a game changer for website tours and it’s probably the best vanilla JS script out there with all these options.