Interactive Walkthrough Plugin In Vanilla JavaScript – Steptip.js

Preview:

Description:

Steptip.js is a Vanilla JavaScript walkthrough (guided tour) library to generate interactive feature/product/tutorial tours on the website.

The plugin enables you to programmatically create step-by-step tooltips that can be used to guide your visitors through your website.

How to use it:

1. Add the stylesheet ‘steptip.css’ and JavaScript ‘steptip.js’ to the webpage.

<link rel="stylesheet" href="steptip.css" />
<script src="steptip.js"></script>

2. Create steps using the following parameters:

• ele: target element
• msg: tooltip message
• ord: order index
• mode: ‘light’ or ‘dark’

// steptip.tooltip(ele, msg, ord, mode);
steptip.tooltip(document.getElementById("first"),"This is the first tutorial tooltip!",1,"light");
steptip.tooltip(document.getElementById("second"),"This is the second tutorial tooltip!",2,"dark");
steptip.tooltip(document.getElementById("last"),"This is the last tutorial tooltip!",3,"light");

3. Start the tour.

steptip.startTutorial();