Skip to content

Instantly share code, notes, and snippets.

Embed
What would you like to do?
Minimal Example in Shepherd
div {
text-align: center
}
#a {
border: 2px red solid;
height: 40px
}
#b {
border: 2px blue solid;
height: 40px
}
<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>
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
You can’t perform that action at this time.