
Tour.js – Touring and on-boarding for JavaScript applications - tannerlinsley
https://github.com/tourjs/tour
======
tannerlinsley
It's time for better onboarding tools in web apps. Tour will leave your users
wanted more.

\- Supports single page apps, and complex scrollable content \- Responsive &
Intelligent \- Automagic Tooltip Positioning, it just works. \- Promise Driven
Events & Hooks for fine-grained control \- It's very lean for the features it
has. 12k gzipped. \- Most importantly, Tour does not restyle, change
z-indices, or manipulate your DOM elements in any way

Give it a try! The beta is already available on NPM CDN:

[https://npmcdn.com/tour@latest/dist/tour.js](https://npmcdn.com/tour@latest/dist/tour.js)

[https://npmcdn.com/tour@latest/dist/tour.css](https://npmcdn.com/tour@latest/dist/tour.css)

\----- Quick JS Demo -----

import Tour from 'tour'

const myTour = {

    
    
        canExit: true,
        
        steps: [{
        
            target: '#first-element',
            
            content: 'This is the first step!',
            
        }, {
        
            target: '.some .other .element',
            
            content: 'Blah blah blah. I prefer to show up on the right.',
            
        }, {
        
            target: '#menu-element',
            
            content: 'I guess this is a menu!',
            
        }, {
        
            target: '#last-element',
            
            content: 'It is over! :(',
            
        }],
        

};

Tour.start(myTour)

    
    
      .then(() => {
      
        console.log('Tour Finished!');
        
      })
      
      .catch(() => {
      
        console.log('Tour Interrupted!')
        
      });
      
    

\------------------------

------
jsonmaur
Awesome! Love that it doesn't manipulate the DOM at all... that's really
clever.

