Tour
Hopscotch is a framework to make it easy for developers to add product tours to their pages.To learn more about Hopscotch and the API, check out linkedin.github.io/hopscotch.
Tour light
Default tour which is in light mode.
1
Tour light
Search about components from this forms.
<div id="doc-list">
...
</div>
<div id="get-support">
...
</div>
<div id="jump-to">
...
</div>
<!-- Hopscotch JS -->
<script src="vendors/hopscotch/dist/js/hopscotch.min.js"></script>
$(window).on("load",function(){
// Define the tour!
var tour = {
id: "hopscotch-light",
steps: [
{
target: "doc-list",
placement: 'bottom',
title: 'Search in docs',
content: "Search about components from this forms.",
},
{
target: "get-support",
placement: 'left',
title: 'Get support',
content: "Get the best support by team Nubra UI.",
},
{
target: "jump-to",
placement: "left",
title: "RTL view",
content: "Jump to any section according to your requirement.",
}
],
showPrevButton: true,
};
// Start the tour!
hopscotch.startTour(tour);
});
Tour dark
Change thw tour skin by adding id: "hopscotch-dark"in javascript file.
1
Tour dark
Search about components from this forms.
<div id="doc-list">
...
</div>
<div id="get-support">
...
</div>
<div id="jump-to">
...
</div>
$(window).on("load",function(){
// Define the tour!
var tour = {
id: "hopscotch-dark",
steps: [
{
target: "doc-list",
placement: 'bottom',
title: 'Search in docs',
content: "Search about components from this forms.",
},
{
target: "get-support",
placement: 'left',
title: 'Get support',
content: "Get the best support by team Nubra UI.",
},
{
target: "jump-to",
placement: "left",
title: "RTL view",
content: "Jump to any section according to your requirement.",
}
],
showPrevButton: true,
};
// Start the tour!
hopscotch.startTour(tour);
});