Stack Overflow
Stack Overflow

Questions tagged [hopscotch]

Hopscotch is a framework to make it easy for developers to add product tours to their pages. 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

About

Hopscotch is a framework to make it easy for developers to add product tours to their pages. 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.you can check a demo here

Features

  • Callbacks for tour events (e.g. onStart, onEnd, onShow, onNext, onPrev, onClose)
  • Multi-page persistence using HTML5 sessionStorage using cookies as a fallback.
  • I18N support
  • Lightweight single callouts

Useful links

14 questions
9
votes
6 answers

Hopscotch tour step on dynamically generated content

I am implementing several of Hopscotch tours in my app. So far I have managed to make many tours without any problem but today, I am facing a challenge I could not resolve far. My question is: how do I get a tour step target to work on dynamically…
Guido
  • 387
  • 2
  • 13
3
votes
1 answer

Remove Double Quotes from JSON Property

I am trying to create an interactive tour using hopscotch.js. The standard data structure that the JavaScript library requires the tour to be in to work is as follows: // Define the tour! var tour = { id: "hello-hopscotch", steps: [ …
Stu1986C
  • 1,452
  • 1
  • 18
  • 34
2
votes
0 answers

Cannot read property ‘nextOnTargetClick’ error after Hopscotch tour ends/is closed

I am using LinkedIn's Hopscotch framework for a tutorial, and implemented this onStart of the tour to move between tour steps using the left and right arrow keys: Keyboard support to navigate between steps The function works fine, but when the tour…
valangar
  • 151
  • 1
  • 7
2
votes
2 answers

Element Alignment with LinkedIn Hopscotch

I've just started using LinkedIn's Hopscotch to create a page tour for new users. It seems pretty simple to use, except all the elements seem to be out of alignment as shown in the image below. Any idea how to fix this issue? This is my js…
Mitchell Weiss
  • 93
  • 1
  • 4
  • 9
1
vote
0 answers

Starting a new tour on the end of a tour not working

// Take the tour takeToTour() { const tour = { id: "cryptex-tour", showPrevButton: true, i18n: { closeTooltip: String.fromCharCode(10060) }, onEnd: () => { // Clearing cookies for…
Sai M.
  • 2,548
  • 4
  • 29
  • 46
1
vote
1 answer

trouble calling/Loading .js classes and functions from simple Angular2 app written in .ts

I have a simple angular application (https://angular.io/resources/live-examples/toh-6/ts/eplnkr.html) and I am attempting to add graphical overlays using hopscotch.js (http://linkedin.github.io/hopscotch/). I got hopscotch to run successfully from…
Rbrt Mlt
  • 31
  • 3
1
vote
1 answer

Hopscotch onClose tour function

I am creating a tour using Hopscotch and I would like to create the ability for the user to take or exit a tour of the page once they hit it. I am trying to create a onClose function but I am getting stuck. var tour = { id:…
nd1990
  • 11
  • 1
1
vote
1 answer

LinkedIn hopscotch tutorial - how to change the name of the label?

I am setting up a LinkedIn tour for the website. http://linkedin.github.io/hopscotch/ It is working fine. But I need to change the text of a done button. Once I put the following line i18n.doneBtn, the static page comes up but dynamic execution…
Vladimir
  • 335
  • 1
  • 7
  • 24
0
votes
0 answers

Hopscotch tour is not working for second or third page

I have tried lot to work with multipage tour, but it does not working for second or third page. No tour is displayed on second page. I have followed links to setup multipage tour: https://linkedinattic.github.io/hopscotch/multipage1.html Hopscotch…
Ishpreet
  • 659
  • 5
  • 19
0
votes
1 answer

Hopscotch close modal onNext or onEnd

I'm confused. I can open the modal using this: onNext: function() { $('#modal').modal('toggle'); } But I can't close the modal with the same function with another $('#modal').modal('toggle'); or $('#modal').modal('hide'). I even tried creating a…
user3744076
  • 127
  • 6
  • 15
0
votes
1 answer

Hopscotch multipage tour does not work

I am trying to implement hopscotch tour for my application which is in react.Multipage tour in hopscotch does not work properly.The documentation says that it works with sessionStorage and cookies and may be that is creating a problem.If these are…
Shaheen Shaikh
  • 1
  • 2
0
votes
2 answers

How to implement LinkedIn Hopscotch

I would like to know how to implement a simple LinkedIn HopScotch. I tried to implement, but was unsuccessful in getting it done. Below is my attempted implementation;

My First Hopscotch Tour

Content…

user3556610
  • 151
  • 1
  • 1
  • 6
0
votes
1 answer

Using Hopscotch to autoplay tour and have it never play again after closed/done?

The Hopscotch example tour sets up the parameters and calls hopscotch.startTour(tour); however neither the close "x" nor the "Done" buttons seem to prevent it from playing again after the page loads. How can that be accomplished?
busse
  • 1,761
  • 14
  • 25
0
votes
1 answer

How to make an automated tour using Hopscotch library?

Hopscotch work well for me in developing tour for my website. I am looking for a way to automatically execute the tour steps with some custom time delay, but didnt' found any API for the same.
Kush Shukla
  • 3
  • 1