Skip to main content

Hint API

introJs([targetElm])

Creating an introJs object.

Available since: v0.1.0

Parameters:

  • targetElm : String (optional) - Should be defined to start introduction for specific element, for example: #intro-farm.

Returns:

  • introJs object.

Example:

introJs() //without selector, start introduction for whole page
introJs("#intro-farm") //start introduction for element id='intro-farm'

introJs.setOption(option, value)

Set a single option to introJs object.

Available since: v0.3.0

Parameters:

  • option: String - Option key name.
  • value: String/Number - Value of the option.

Returns:

  • introJs object.

Example:

introJs().setOption("skipLabel", "Exit");

introJs.setOptions(options)

Set a group of options to the introJs object.

Available since: v0.3.0

Parameters:

  • options : Object Object that contains option keys with values.

Returns:

  • introJs object.

Example:

introJs().setOptions({ 'skipLabel': 'Exit', 'tooltipPosition': 'right' });

introJs.refresh()

To refresh and order layers manually. This function rearranges all hints as well.

Available since: v0.5.0

Last update: v2.1.0

Returns: - introJs object.

Example:

introJs().refresh();

Show a specific hint.

introJs.addHints()

To add available hints to the page (using data-hint or JSON)

Available since: v2.0

Returns: - introJs object.

Example:

introJs().addHints();

introJs.showHint(hintId)

Show the hint with given hintId.

Available since: v2.4.0

Example:

introJs().showHint(1);

introJs.showHints()

Show all hints.

Available since: v2.4.0

Example:

introJs().showHints();

introJs.hideHint(stepId)

Hides the hint with given stepId. The stepId is an integer and it’s the value of data-step attribute on the hint element.

Available since: v2.1

Returns: - introJs object.

Example:

introJs().hideHint(0); //you should pass the id of the hint (the `data-step` attribute).

introJs.showHintDialog(stepId)

Shows the popup dialog next to the hint with given stepId. The stepId is an integer and it’s the value of data-step attribute on the hint element.

Available since: v2.6

Returns: - introJs object.

Example:

introJs().showHintDialog(0); //you should pass the id of the hint (the `data-step` attribute).

introJs.hideHints()

Hides all hints on the page.

Available since: v2.2

Returns: - introJs object.

Example:

introJs().hideHints();

introJs.onhintclick(providedCallback)

Invokes given function when user clicks on one of hints.

Available since: v2.0

Parameters: - providedCallback : Function

Returns: - introJs object.

Example:

introJs().onhintclick(function() { 
alert("hint clicked");
});

introJs.onhintsadded(providedCallback)

Invokes given callback function after adding and rendering all hints.

Available since: v2.0

Parameters: - providedCallback : Function

Returns: - introJs object.

Example:

introJs().onhintsadded(function() { 
alert("all hints were added");
});

introJs.onhintclose(providedCallback)

Set callback for when a single hint removes from page (e.g. when user clicks on “Got it” button)

Available since: v2.0

Parameters: - providedCallback : Function

Returns: - introJs object.

Example:

introJs().onhintclose(function() { 
alert("hint closed");
});