Web library for creating website guide using pop-up windows.

Usage no npm install needed!

<script type="module">
  import webguide from 'https://cdn.skypack.dev/webguide';




Webguide has just one dependency and it's jQuery. It's used to animate showing and hiding of elements as well as pop-up windows.


You can acquire local copy to your project from:

  1. The github repository from this link
  2. Using npm npm install webguide

Setup & Start

After the download of the source, you need to link the library file to your page. The library has three main parts

  • Firstly, you need to select chosen HTML element you want to include by adding custom-data-attribute so the library knows exactly which elements it should consider. It may look like this:

     <button id="example" data-guide="true">Example button</button>
  • Secondly, you should select the order of elements, so the program knows which element is first, which is second etc. This is made by custom-data as well. Let's use our button again and set the element second in the sequence to be shown. It's gonna look like this:

     <button id="example" data-guide="true" data-guide-step="2">Example button</button>
  • The last part is to initialize guide in TypeScript file with an input array of chosen messages, it may look like this:

     let messages=[ “this is my first message“ , “second one“ , ... , “this will be end of the guide“ ];


    You can add position of pop-up windows as well if you want to, or the layout of your page requires that. The position of pop-up window is set to be under the HTML element by default, but you can easily change that simply by adding position attribute to your element. The “position“ can be “L“ , “R“ and “U“ (left,right and up, down is set by default). It my look like this:

     <button id="example" data-guide="true" data-guide-step="2" data-guide-position="R">Example button</button>

    Now you should be completely ready to go and use this library.


    • Matúš Kanda