Skip to content

A lightweight javascript library for step-by-step product tours and user onboarding guides

License

Notifications You must be signed in to change notification settings

alphajwc/tiny-tour

Repository files navigation

Tiny-Tour.js

A lightweight javascript library for step-by-step product tours and user onboarding guides

Version

Features Demo

Demo Website

Click Here - Demo Website

Features Highlights

  • Next Step
  • Previous Step
  • Support Image
  • Responsive Design

Main Files and Descriptions

src/
├── tiny-tour.css   (uncompressed)
├── tiny-tour.css   (compressed)
├── tiny-tour.js    (uncompressed)
└── tiny-tour.js    (compressed)

Getting Started

Installation

NPM

npm install tiny-tour.js

In browser:

<link  href="/path/to/tiny-tour.min.css" rel="stylesheet">
<script src="/path/to/tiny-tour.min.js"></script>

Example

<html>
     <body>
        <div id="target1" style="position:absolute;top:1000px;">
            <p> I am the long long long long long long long long long target</p>
        </div>  
        <div id="target2" style="position:absolute;top:300px;">
            <p> I am the target</p>
        </div>  
        <div id="target3" style="position:absolute;top:300px;left:400px">
            <p> I am the target</p>
        </div>  
    </body>
  
    <script>
        const stepList = [];
        stepList.push(new Step('target1',`<img width='200px' height='200px' src="image.jpg">`,`Let me show you`))
        stepList.push(new Step('target2','Title 2','Description2'))
        stepList.push(new Step('target3','Title 3','Description3'))
        const tinyTour = new TinyTour(stepList);
    </script>
</html>

About

A lightweight javascript library for step-by-step product tours and user onboarding guides

Topics

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published