Skip to content

Instantly share code, notes, and snippets.

@mollietaylor

mollietaylor/tour.css

Created May 12, 2014 17:46
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save mollietaylor/215f864f77be4d2fb046 to your computer and use it in GitHub Desktop.
Save mollietaylor/215f864f77be4d2fb046 to your computer and use it in GitHub Desktop.
Download ZIP
Minimal Example in Shepherd
Raw
tour.css
div {
text-align: center
}
#a {
border: 2px red solid;
height: 40px
}
#b {
border: 2px blue solid;
height: 40px
}
Raw
tour.html
<html>
<head>
<!-- Shepherd -->
<script type="text/javascript" src="http://github.hubspot.com/shepherd/shepherd.js"></script>
<!-- Shepherd themes -->
<link rel="stylesheet" href="http://github.hubspot.com/shepherd/css/shepherd-theme-arrows.css" />
</head>
<body>
<div id="a">Div A</div>
<div id="b">Div B</div>
<script type="text/javascript" src="tour.js"></script> <!-- Must be after any HTML or JS referenced in it -->
</body>
</html>
Raw
tour.js
var tour;
tour = new Shepherd.Tour({
defaults: {
classes: 'shepherd-theme-arrows'
}
});
tour.addStep('any-name', {
text: 'Example text',
attachTo: '#a bottom',
buttons: [
{
text: 'Next',
action: tour.next
}
]
});
tour.addStep('b-step', {
text: 'Example 2',
attachTo: '#b bottom',
buttons: [
{
text: 'Finish',
action: tour.next
}
]
});
tour.start();
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment