intro js is probably the most popular and one of the best javascript library for creating tutorial
hint or instruction for web application you can create a tutorial like this in just a few minutes
without having to write messy code in this video i'm going to show you how to set up and use intro
js and all the important features that you should know to get started ready let's check it out
so here is the login form from our previous video
let's suppose that i want to create a tutorial on it setting up intro js is very easy
you can include it from cdn to the web page using script tab you will need to
include both css and js files or if you want to get a local copy you can use npm install
now the easiest way to create a simple tutorial is to use html attribute for
example if we want to add a tutorial step on the login form i will add data-title attribute
this will be the title of the tutorial box then add data-intro attribute for the text description
let's add another tutorial step on the login button as well
and to start the tutorial call the start static method
and that's it let's see the result
now beside tutorial intro to has also support hint hotspot
when click on it the tutorial box will appear and then the hint will be removed
adding hint is similar to adding tutorial step just add data hint attribute to the
element you need you can also specify the hint box position using data hint position attribute
then call add hints method to initialize the hint spots
now the more advanced way to add more customizable tutorial is use api instead of html attribute
to create a tutorial we will use set options method and create each tutorial
step in the options object we'll create an array to contain all the tutorial steps
we'll add the tutorial text using intro property
if we don't specify the element then the tutorial will show on the center of the page let's create
another tutorial step this time we will target the login button as our element using query selector
now you can also use html for tutorial content
for example i'm going to add a paragraph and a video inside the box for this step
also you can specify the position of the tutorial box okay let's see the results so far
now there are some options that you can customize the tutorial box
for example you can switch from the bullet navigation into the progress
bar instead you can add these options next to the steps property in your option object
also if you want to prevent users from interacting with the element while the tutorial is still
active then set disable interaction to true now you can see the progress bar instead of the bullet
and also you can't click the button during the tutorial these are basic features of the intro js
but there are some couple tips that might be useful first is there some preset theme
that you can choose from simply add the theme css file right after the main css file and that's it
but if you want to add your own custom css then you can add your
own class name using tooltip class option so you can select them easier
and the last one is you can use oncomplete event handler if you want to trigger something
immediately after the tutorial is completed you can chain calling it before the start method
also please note that if you want to use intro.js in commercial application then
you need to purchase their license first and that's all for this tutorial hope this helped
you get started and if you want to see more development tips and tutorial videos
subscribe this channel to stay tuned thanks for watching see you next time bye