intro.js - step-by-step guide for the web page

This small library makes it very easy to create a step-by-step introduction for a site or application. It is enough to add the data-intro and data-step attributes with the description and step number respectively to the desired page elements. Like this:

 <a href='http://google.com/' data-intro='Hello step one!' data-step='1'></a> 

To start the presentation, you need to call the introJs().start() function. The introduction can be divided into parts by assigning different classes to the elements of each part and limiting the introJs to a specific class. For example, if all elements of the first part of the presentation have the .introduction-first class, and the second - .introduction-second , you can first call only the first part, and in another place, for example, after the user performs some actions - the second:
')

 introJs(".introduction-first").start(); ... introJs(".introduction-second").start(); 

Elements are alternately highlighted with comments specified in the data-intro attributes. You can move between them using the arrows on the keyboard or by clicking the mouse. The project site has a live demo .

The library was published on Github under the MIT license just a few days ago. The author plans for the near future - to improve compatibility with different browsers, to add the ability to position the tooltip relative to the current element. There is already a matching gem for use with Ruby on Rails, there is also a widget for Yii.