Hopscotch.js, dynamically created modal target not functioning

Question

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.

Answer 1

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 ;)