In some cases, append the entire hopscotch element to the body is undesirable. For example, angular apps use many templates and you don't want the tour bubbles persisting between different views. This PR allows a user to specify an appendTo to a tour to specify which element to append the hopscotch element to. If the element doesn't exist, the hopscotch element will be appended to the body.

Could we have an example of i18n working? I made this:

var retour = {
  id: "tutorial-user-creation",
  steps: [
                  {
                    title: "Tutorial is here",
                    content: "At any time you can press this button to restart the tutorial.",
                    target: '#restart_tutorial',
                    placement: "bottom",
                    xOffset: -15,
                    showNextButton: true,
                    showPrevButton: true
                  },
  ],
  i18n.nextBtn: "Próximo"
};
 hopscotch.startTour(retour);

...and it returns me the error "Uncaught SyntaxError: Unexpected identifier". In the documentation it says it accepts string. What is wrong with that?

Thank you.

Hi i'm using hopscotch in a rails app that uses Turbolinks. On an initial page load of the app I can trigger hopscotch tours manually with hopscotch.startTour When switching to a new page with Turbolinks I can call the hopscotch api methods, startTour GetCurrStepNo GetCurrTour they look successful but hopscotch doesn't render any DOM elements. I'm thinking some hook or event or something gets wiped in the Turbolinks page load and needs to be reestablished.

Hello, in my project, I dynamically create tours and steps from values retrieved from a database. So far I wasn't able to assign a function, i.e. to the onNext property. The problem is that the function is retrieved as a string from the database. So I end up with something like the following, which I guess is no surprise that it doesn't work.

content: "Test Content..." onNext: "function(){alert('help!');}" placement: "top"

Cause why not? For my team, this was the expected behavior and hopscotch does not currently throw a useful error message when it does not get what it expects. We were confused when encountering exceptions when given a perfectly valid selector, especially since the code that calls this handles multiple matches gracefully.

This implementation passes all tests that are currently passing in master, and preserves backwards compatibility for existing calls to getStepTargetHelper.

Copied and pasted the exact callout code from the Hopscotch demo to test in my page

var calloutMgr = hopscotch.getCalloutManager();
calloutMgr.createCallout({
  id: 'attach-icon',
  target: 'attach-btn',
  placement: 'bottom',
  title: 'Now you can share images & files!',
  content: 'Share a project you\'re proud of, a photo from a recent event, or an interesting presentation.'
});

this results in Chrome throwing errors: Uncaught TypeError: Cannot read property 'getBoundingClientRect' of null

and

Uncaught Error: Callout by that id already exists. Please choose a unique id.

Looks like the gradient syntax changed a bit:

autoprefixer: /tmp/build/node_modules/hopscotch/dist/css/hopscotch.css:290:3: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

autoprefixer: /tmp/build/node_modules/hopscotch/dist/css/hopscotch.css:299:3: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

autoprefixer: /tmp/build/node_modules/hopscotch/dist/css/hopscotch.css:311:3: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

autoprefixer: /tmp/build/node_modules/hopscotch/dist/css/hopscotch.css:320:3: Gradient has outdated direction syntax. New syntax is like "to left" instead of "right".

Calling showStep without a proper step target fails, but the tour error callback is not invoked. This change fixes that, and sets the current step number to the step that failed for debugging purposes

I'm getting a different error in my codepen example (used in the issue report) related to the 'bubble_default' template, so I wasn't able to test this. I do have this fix in a client code-base however, and that is working fine.

This may be imperfect, if so I apologize. Just thought I'd try to get this in for the maintenance release if possible.

I'm having difficulty getting the tour to restart at the first step after page reload.

I've tried specifying a step in the startTour() function, and I've tried using showStep() passing in the first step in as an argument. Neither of these have worked (nor have they thrown an error).

As far as I know, there's no easy way to disable sharing data between sessions.

Could you point me in the right direction?

Caching step targets causes problems with web apps that modify the DOM.

I suggest that it's an unnecessary optimization, that would be better removed.

There are a couple of current enhancements for configuration changes that affect the internals of each Hopscotch bubble (#33 and #39). I'm thinking, instead of creating new configuration options that affect the bubble display (which could lead to a bloated configuration object over time), what if we could provide the option to use a JavaScript template (or other method) to render the internals of each bubble?

How it would work

A user could define a render method in their tour configuration options or register a template via hopscotch.registerTemplate(Function render). Hopscotch would be agnostic to how this template is written or compiled... all it cares about is a method that it can hand an object off to for rendering the bubble's internals. The object itself would contain information relevant to the current step (title, content, stepNum, totalSteps, button info, labels) and would be responsible for returning HTML that can be set as the bubble's innerHTML.

Other contemplations

• How to handle events? One possibility is to include some means when declaring the template to provide the IDs that Hopscotch should attach events to. Or, we could have Hopscotch pass a DOM reference to the render method and require it to handle attaching the events.
• Should render() be limited in its scope to just the inside of the bubble, or should it have responsibility for the structure of the whole bubble? The latter might require some updates to positioning calculations.
• If we go this route, we may want to consider modifying how Hopscotch currently does bubble rendering to use this new pattern instead.

Any thoughts?

We have a webservice with same domain iframes and we have the tour script and hopscotch source code in the top document.

These are the iframes:

<button id="startTourBtn" onClick="hopscotch.startTour(tour);" class="btn btn-large btn-primary">Take a tour</button>
	<div class="wrapper">
		<div class="container_left" id="resizable">	
			<div class="container_publications">	
				<iframe name="list_publications" id="list_publications" marginwidth="0" allowtransparency="true" frameBorder="0" scrolling="yes"></iframe>
				<iframe name="media_timeline" id="media_timeline" marginwidth="0" allowtransparency="true" frameBorder="0" scrolling="no"></iframe>
			</div>
		</div>
		<div class="container_right">		
			<div class="container_read_media">
				<iframe name="flip_publication" id="flip_publication" allowfullscreen marginwidth="0" frameBorder="0" allow="encrypted-media" scrolling="yes">
			</div>
		</div>
	</div>

Please let us know how to write the tour to reference elements in the iframes. Here are some examples of what we've done so far - none of the tries have been working:

var tour = {
  id: "introduction_tour",
	showPrevButton: true,
	showNextButton: true,
  steps: [
	{
	  title: "Guided tour",
	  content: "This starts a guided tour of the application.",
	  target: "startTourBtn",
	  placement: "bottom"
	},
	{
	  title: "Searching the system",
	  content: "This is where you enter a search",
	  target: "q",
	  placement: "bottom"
	},
	{
	  title: "The publications",
	  content: "Here are the publications. Click on the thumbnail to read/watch/listen. Click on text under thumbnail to read publication data.",
	  target: "$('#list_publications').contents().find('.article-container')",
	  placement: "right"
	}
  ]
};

Thanks for any help!!

Wondering why documentation for templates is hidden in https://github.com/linkedin/hopscotch/tree/master/src/tl and no mention within documentation at http://linkedin.github.io/hopscotch/

Are these methods not expected to be public?

It seems like providing templates for bubbles is a pretty typical use case. It would be useful to include a template property in the TourDefinition and StepDefinition interfaces. If a template isn't provided then should use default template.

Also setRenderer isn't defined on the type for Hopscotch https://github.com/DefinitelyTyped/DefinitelyTyped/blob/master/types/hopscotch/index.d.ts#L81-L161

Hi,

I'm trying to create my first tour with Hopscotch, but I'm having a problem. The "popup" is well positioned but when I scroll the popup move. I know the property "fixedElement" but I can't use it because the target can't be fixed on this page.

Is there another way to do this ?

Thank's

hopscotch pulls the images from hopscotch.min.css

link rel="dns-prefetch" href="https://github.githubassets.com" link rel="dns-prefetch" href="https://avatars0.githubusercontent.com" link rel="dns-prefetch" href="https://avatars1.githubusercontent.com" link rel="dns-prefetch" href="https://avatars2.githubusercontent.com" link rel="dns-prefetch" href="https://avatars3.githubusercontent.com" link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com" link rel="dns-prefetch" href="https://user-images.githubusercontent.com/

and from here:

.hopscotch-bubble-close{-webkit-appearance:none;-moz-appearance:none;appearance:none;border:0;color:#000;background:transparent url(../img/sprite-green.png) -192px -92px no-repeat;display:block;padding:8px;position:absolute;text-decoration:none;text-indent:-9999px;width:8px;height:8px;top:0;right:0}div.hopscotch-bubble .hopscotch-bubble-close.hide,div.hopscotch-bubble .hopscotch-bubble-close.hide-all{display:none}div.hopscotch-bubble .hopscotch-bubble-number**{background:transparent url(../img/sprite-green.png)**