Author: | LikaloLLC |
---|---|
Views Total: | 391 views |
Official Page: | Go to website |
Last Update: | February 15, 2023 |
License: | MIT |
Preview:

Description:
tourguide.js is a JavaScript library which helps you create an interactive, step-by-step tour to guide your visitor through new features and highlighted content on the app.
Click the arrow button to advance to the next step of the tour. Click the pagination bullets to go to the specific step of the tour.
More features:
- Smooth scrolls the page to the current step.
- Auto scrolls the page to the original position when the tour is finished.
- Allows you to load steps from an external data source.
- Image preload.
- Compatible with vanilla JavaScript, Angular, React and Vue.js.
- Lots of options, methods, events.
How to use it:
To get started, insert the stylesheet tourguide.css
and JavaScript tourguide.js
into the document.
<link rel="stylesheet" href="tourguide.css"> <script src="tourguide.min.js"></script>
Initialize the tourguide.js and create a new tour instance.
var myTour = new Tourguide();
Define steps in the data-tour attribute. Available properties:
- step: step index
- title: step title
- content: step content
- image: step image (optional)
- actiontarget: action target (optional)
<h1 data-tour="step: 1; title: Page Title; image: 1.jpg; content: This is page title">Tour example</h1>
Start the tour and done.
myTour.start();
You can also config the tourguide.js to load step data from a JSON file.
// data.json [ { "selector": "Select 1", "step": 1, "title": "Step 1", "content": "Step 1 content", "image": "1.jpg" }, { "selector": "Select 2", "step": 2, "title": "Step 2", "content": "Step 2 content", "image": "2.jpg" }, { "selector": "Select 3", "step": 3, "title": "Step 3", "content": "Step 3 content", "image": "3.jpg" } // ... ]
var myTour = new Tourguide({ src: "/path/to/json.json" }); // or var steps= [] var myTour = new Tourguide({ steps: steps });
All possible options with default values.
var myTour = new Tourguide({ root: "body", selector: "[data-tour]", animationspeed: 300, padding: 5, steps: null, src: null, restoreinitialposition: true, preloadimages: false, colors: { fontFamily: 'sans-serif', fontSize: "14px", tooltipWidth: "40vw", overlayColor: "rgba(0, 0, 0, 0.5)", textColor: "#333", accentColor: "#0d6efd", focusColor: "auto", bulletColor: "auto", bulletVisitedColor: "auto", bulletCurrentColor: "auto", stepButtonCloseColor: "auto", stepButtonPrevColor: "auto", stepButtonNextColor: "auto", stepButtonCompleteColor: "auto", backgroundColor: "#fff", }, keyboardNavigation: { "next": "ArrowRight", "prev": "ArrowLeft", "first": "Home", "last": "End", "complete": null, "stop": "Escape" }, request: { "options": { "mode": "cors", "cache": "no-cache" }, "headers": { "Content-Type": "application/json" } }, actionHandlers: [], // array of custom step action handlers contentDecorators: [], // array of custom step decoration handlers });
Callback functions.
var myTour = new Tourguide({ onStart: function(options){...}, onStop: function(options){...}, onComplete: function(){...}, onStep: function(currentstep, type){...}, });
API methods.
// starts the tour myTour.start(); myTour.start(2); // starts at step 2 // stops the tour myTour.stop(); // goes to the next step myTour.next(); // backs to the previous step myTour.previous(); // goes to a specific step myTour.go(2);
Changelog:
v1.1.3 (02/15/2023)
- Bugfix
v1.1.2 (01/09/2023)
- Feature/step actions
- Transition to floating-ui library
- Properly validate step parameters
- Fix/size of the step preview
12/03/2022
- v1.0.1
12/01/2022
- Rebuilt
01/21/2022
- Make sure we do not fail on empty selector
v0.3.0 (02/01/2021)
- Correctly parse steps of the tour when from DOM source
v0.3.0 (01/28/2021)
- Bugfix
01/22/2021
- fixed overlay issues
- fixed error reporting issue
- fixed cleaning up issue
01/07/2021
- Fixed: Don’t hide overlay between 2 steps
01/06/2021
- Fixed: Remote JSON src configured tourGuide options as src results in error