**2)** Add `data-intro` and `data-step` to your HTML elements.

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

````

See all attributes [here](https://github.com/usablica/intro.js/#attributes).

**3)** Call this JavaScript function:

```javascript

introJs().start();

````

Optionally, pass one parameter to `introJs` function to limit the presentation section.

**For example** `introJs(".introduction-farm").start();` runs the introduction only for elements with `class='introduction-farm'`.

- `data-intro`: The tooltip text of step

- `data-step`: Optionally define the number (priority) of step

- `data-tooltipClass`: Optionally define a CSS class for tooltip

###Options:

- Fix show element for elements with position `absolute` or `relative`

- Add `enter` key for navigating in steps

- Code refactoring

## Author

**Afshin Mehrabani**

## License

> Copyright (C) 2012 Afshin Mehrabani (afshin.meh@gmail.com)

and to permit persons to whom the Software is furnished to do so, subject to the following conditions:

of the Software.

IN THE SOFTWARE.

function _previousStep() {

this._direction = 'backward';

if (this._currentStep === 0) {

return false;

}

function _exitIntro(targetElement) {

//remove overlay layer from the page

var overlayLayer = targetElement.querySelector('.introjs-overlay');

//return if intro already completed or skipped

if (overlayLayer == null) {

return;

} else if (document.detachEvent) { //IE

document.detachEvent('onkeydown', this._onKeyDown);

}

//set the step to zero

this._currentStep = undefined;

}

function _placeTooltip(targetElement, tooltipLayer, arrowLayer, helperNumberLayer) {

//reset the old style

tooltipLayer.style.top = null;

tooltipLayer.style.right = null;

//prevent error when `this._currentStep` is undefined

if (!this._introItems[this._currentStep]) return;

//if we have a custom css class for each step

if (typeof (currentStepObj.tooltipClass) === 'string') {

tooltipCssClass = currentStepObj.tooltipClass;

} else {

//custom css class for tooltip boxes

var tooltipCssClass = this._options.tooltipClass;

switch (currentTooltipPosition) {

case 'top':

tooltipLayer.style.left = '15px';

arrowLayer.className = 'introjs-arrow left';

break;

case 'left':

tooltipLayer.style.top = '15px';

}

tooltipLayer.style.right = (_getOffset(targetElement).width + 20) + 'px';

arrowLayer.style.display = 'none';

//we have to adjust the top and left of layer manually for intro items without element{

tooltipLayer.style.left = '50%';

tooltipLayer.style.top = '50%';

}

break;

case 'bottom':

// Bottom going to follow the default behavior

default:

//prevent error when `this._currentStep` in undefined

if (!this._introItems[this._currentStep]) return;

if (currentElement.position == 'floating') {

widthHeightPadding = 0;

}

while (parentElm != null) {

if (parentElm.tagName.toLowerCase() === 'body') break;

//More detail: https://developer.mozilla.org/en-US/docs/Web/Guide/CSS/Understanding_z_index/The_stacking_context

var zIndex = _getPropValue(parentElm, 'z-index');

var opacity = parseFloat(_getPropValue(parentElm, 'opacity'));

if (/[0-9]+/.test(zIndex) || opacity < 1) {

parentElm.className += ' introjs-fixParent';

}

parentElm = parentElm.parentNode;

}

window.scrollBy(0, bottom + 100); // 70px + 30px padding from edge to look nice

}

}

if (typeof (this._introAfterChangeCallback) !== 'undefined') {

this._introAfterChangeCallback.call(this, targetElement.element);

}

line-height: 20px;

border: 3px solid white;

border-radius: 50%;

filter: progid:DXImageTransform.Microsoft.Shadow(direction=135, strength=2, color=ff0000); /* IE10 text shadows */

box-shadow: 0 2px 5px rgba(0,0,0,.4);

}

border-bottom-color:white;

border-left-color:transparent;

}

.introjs-arrow.right {

right: -10px;

top: 10px;

text-align: right;

}

.introjs-button {

.introjs-button:hover {

border-color: #bcbcbc;

box-shadow: 0px 1px 1px #e3e3e3;

}