tiny-tour

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

1.0.3
latest
Source
npm

Version published: 2 years ago

Maintainers: 1

Created: 2 years ago

Source

Tiny-Tour.js

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

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>

Keywords

FAQs

What is tiny-tour?

Is tiny-tour well maintained?

Package last updated on 28 Nov 2022

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install