Better introductions for websites and features with a step-by-step guide for your projects.
You can obtain your local copy of Intro.js from:
1) You can get from original github repository, using git clone https://github.com/usablica/intro.js.git
2) You can simply download zip or clone the current github repository, using git clone https://github.com/megabytes1024kb/introjs-with-title.git
1) data-title attribute added for the Dialog Header Title(Heading Text)
Intro.js can be added to your site in three simple steps:
1) Include intro.js and introjs.css in your page.
2) Add data-intro, data-title and data-step to your HTML elements. To add hints you should use data-hint attribute.
The below code shows the use of introJs in Java Script
//initialize instance
var introj = introJs();
//set Steps config in the form of Array
introj.setOptions({
steps: [
{
element: '#step1',
intro: "This is a tooltip!",
title: 'Step 1'
},
{
element: '#step2',
intro: "Ok, wasn't that fun?",
position: 'right',
title: 'Step 2'
},
{
element: '#step3',
intro: 'More features, more fun.',
position: 'left',
title: 'Step 3'
},
{
element: '#step4',
intro: 'Another step.',
position: 'auto',
title: 'Step 4'
},
{
element: '#step5',
intro: 'Get it, use it.',
position: 'left',
title: 'Step 5'
},
]
});
// Run the intro - appear dialog with details.
introj.start();For example:
<a href='http://google.com/' data-intro='Hello step one!' data-title='Google'></a>See all attributes here.
Newly added attribute is
data-title- use to show heading of the introjs dialog box
3) Call this JavaScript function:
introJs().start();There are two example given in this repository
1 With basic data-title attribute
2 With java script array, using setOptions() function which called by script
Please visit Documentation.
Manoj Bawane
Afshin Mehrabani
Benjamin J DeLong