I'm using linkedIn's Hopscotch.

I want to show a bubble to a modal popup, but hopscotch seems to skip the step width the modal.

My guess is the problem is related to the hopscotch target not being there when the tour object is initialized, as the modal is shown on "onNext"-event of a tour step. I've tried both giving the actual object and id-selector as "target"-attribute. I couldn't get either to work.

One extreme option could be to make two different tours, and on the onEnd event of the first one to show the modal, wait until the modal rendering is finished, and then show the "next" tour. But before resorting to this kind of weirdness I'd like to find a neat solution.

I'm using linkedIn's Hopscotch.

I want to show a bubble to a modal popup, but hopscotch seems to skip the step width the modal.

My guess is the problem is related to the hopscotch target not being there when the tour object is initialized, as the modal is shown on "onNext"-event of a tour step. I've tried both giving the actual object and id-selector as "target"-attribute. I couldn't get either to work.

One extreme option could be to make two different tours, and on the onEnd event of the first one to show the modal, wait until the modal rendering is finished, and then show the "next" tour. But before resorting to this kind of weirdness I'd like to find a neat solution.

• javascript
• linkedin-api

Share Improve this question Follow asked Sep 19, 2013 at 14:30 MarcusMarcus 5,15333 gold badges3535 silver badges3939 bronze badges 7

• any solution till now? To get it work, I am writing hacky code which I really hate. – Neha Choudhary Commented Oct 30, 2013 at 12:59
• Not really. I just ended up omitting some of the instructions for now. Some ideas for a not-so-ugly-hack could be to display the elements before tour start, but to position them absolutely & out of the screen, and move them into the screen on the "onNext".. I'm not sure if this works, but just came to my mind. Other ones would be to manipulate hopscotch internals to allow changing the target element (or its positioning) there on the "onNext" event... – Marcus Commented Oct 31, 2013 at 15:17
• Did anyone solved it? – sarsarahman Commented Sep 25, 2014 at 11:02
• @NehaChoudhary did you wrote hack for it??? – sarsarahman Commented Sep 25, 2014 at 11:02
• 1 @sarsarahman dint plete it. – Neha Choudhary Commented Sep 25, 2014 at 17:55

 |  Show 2 more ments

2 Answers 2

Sorted by: Reset to default 7

I had the same issue, so i added a method to refresh the next step target element:

/**
 * getCurrTarget
 *
 * @return {Object} The currently visible target.
 */
 {some code...}


 /**
 * setNextTarget   
 * @ Refresh the target dom element for the next step
 */
 this.setNextTarget = function(el) {
  currTour.steps[currStepNum+1].target = el;
 };

And then i use it like this:

 {step 1 code...}
 onShow:function(){
   hopscotch.setNextTarget($("#myStep2Target")[0]);                         
 }

Not the best approach, but fast to go... hope it helps ;)

To get hopscotch to resolve dynamic targets every time you run a tour, you can simply clone the tour definition i.e.

hopscotch.startTour($.extend(true, {}, tour));