Skip to content

Instantly share code, notes, and snippets.

@im-noob
Created April 26, 2021 14:00
Show Gist options
  • Save im-noob/5461a0c177953af856e1a23bfd67f17e to your computer and use it in GitHub Desktop.
Save im-noob/5461a0c177953af856e1a23bfd67f17e to your computer and use it in GitHub Desktop.
Quick Tour User Guide With https://shepherdjs.dev/
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title></title>
</head>
<body>
<div class="container">
<h2>Button Styles</h2>
<button type="button" id="button1" class="btn">Basic</button>
<button type="button" id="button2" class="btn btn-default">Default</button>
<button type="button" id="button3" class="btn btn-primary">Primary</button>
<button type="button" id="button4" class="btn btn-success">Success</button>
<button type="button" id="button5" class="btn btn-info">Info</button>
<button type="button" id="button6" class="btn btn-warning">Warning</button>
<button type="button" id="button7" class="btn btn-danger">Danger</button>
<button type="button" id="button8" class="btn btn-link">Link</button>
</div>
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-eOJMYsd53ii+scO/bJGFsiCZc+5NDVN2yr8+0RDqr0Ql0h+rP48ckxlpbzKgwra6" crossorigin="anonymous">
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-JEW9xMcG8R+pH31jmWH6WWP0WintQrMb4s7ZOdauHnUtxwoG2vI5DkLtS3qm9Ekf" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/shepherd.js"></script>
<script>
const tour = new Shepherd.Tour({
defaultStepOptions: {
cancelIcon: {
enabled: true
},
classes: 'class-1 class-2',
scrollTo: { behavior: 'smooth', block: 'center' },
}
,useModalOverlay: true
});
tour.addStep({
title: 'button1',
text: 'button1',
attachTo: {
element: '#button1',
on: 'bottom'
},
buttons: [
{
action() {
return this.cancel();
},
classes: 'shepherd-button-secondary',
text: 'Exit'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button2',
text: 'button2',
attachTo: {
element: '#button2',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button3',
text: 'button3',
attachTo: {
element: '#button3',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button4',
text: 'button4',
attachTo: {
element: '#button4',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button5',
text: 'button5',
attachTo: {
element: '#button5',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button6',
text: 'button6',
attachTo: {
element: '#button6',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button7',
text: 'button7',
attachTo: {
element: '#button7',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Next'
}
],
id: 'creating'
});
tour.addStep({
title: 'button8',
text: 'button8',
attachTo: {
element: '#button8',
on: 'bottom'
},
buttons: [
{
action() {
return this.back();
},
classes: 'shepherd-button-secondary',
text: 'Back'
},
{
action() {
return this.next();
},
text: 'Done'
}
],
id: 'creating',
useModalOverlay: true
});
tour.start();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment