megabytes1024kb / introjs-with-title

This github repo is an extension to intro.js library which provide the Heading feature to dialog box

Intro.js Dialog With Heading Text and Style

Better introductions for websites and features with a step-by-step guide for your projects.

Where to get

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

Newly Added feature

1) data-title attribute added for the Dialog Header Title(Heading Text)

How to use

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

Documentation

Please visit Documentation.

Author

Manoj Bawane

• Twitter
• Github

Original Authors

Afshin Mehrabani

• Twitter
• Github
• Personal page

Benjamin J DeLong

• Twitter
• Github
• Personal page