tour.addStep({ title: ‘Creating a Shepherd Tour’, text: Creating a Shepherd tour is easy. too!\ Just create a \Tour` instance, and add as many steps as you want.`, attachTo: { element: ‘.hero-example’, on: ‘bottom’ }, buttons: [ { action() { returnthis.back(); }, classes: ‘shepherd-button-secondary’, text: ‘Back’ }, { action() { returnthis.next(); }, text: ‘Next’ } ], id: ‘creating’ });
// Instantiate the tourvar tour = new Tour({
steps: [
{
element: "#my-element",
title: "Title of my step",
content: "Content of my step"
},
{
element: "#my-other-element",
title: "Title of my step",
content: "Content of my step"
}
]});
<ulid="tlyPageGuide"data-tourtitle="REPLACE THIS WITH A TITLE"><liclass="tlypageguide_left"data-tourtarget=".first_element_to_target"><div>
Here is the first item description. The number will appear to the left of the element.
</div></li><liclass="tlypageguide_right"data-tourtarget="#second_element_to_target"><div>
Here is the second item description. The number will appear to the right of the element.
</div></li><liclass="tlypageguide_top"data-tourtarget=".third_element_to_target > div.is_here"><div>
Here is the third item description. The number will appear above the element.
</div></li><liclass="tlypageguide_bottom"data-tourtarget="#fourth_element_to_target"><div>
Here is the fourth item description. The number will appear below the element.
</div></li></ul>复制代码
// First define your tour.var tour = {
"id": "hello-hopscotch",
"steps": [
{
"target": "profile-picture",
"placement": "right",
"title": "Profile Picture",
"content": "This is your profile picture. Looking good!"
},
{
"target": "find-conn",
"placement": "bottom",
"title": "Find Connections",
"content": "The internet is always more fun when you connect with others. Find some connections by clicking here."
}
]
};
// Then start the tour. hopscotch.startTour(tour); 复制代码