Interactive Walkthrough Plugin In Vanilla JavaScript – Steptip.js

Category: Javascript | July 30, 2020
Author: tomocode
Views Total: 174 views
Official Page: Go to website
Last Update: July 30, 2020
License: MIT

Preview:

Interactive Walkthrough Plugin In Vanilla JavaScript – Steptip.js

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();

You Might Be Interested In:


Leave a Reply