guideme

Demo

https://codepen.io/narsenico/pen/EvbXKB

Repository

https://github.com/narsenico/guideme

Usage

1. Include guideme-bundle.min.js

   <script type="text/javascript" src="guideme-bundle.min.js"></script>

   or guideme-alone.min.js for standalone version without popper.js

   <script type="text/javascript" src="guideme-alone.min.js"></script>

2. Include guideme.css

   <link rel="stylesheet" type="text/css" href="guideme.css">

3. Define steps directly in your html code

   <button 
      data-guideme="Click this button to send data" 
      data-guideme-step="1">
      send
   </button>

4. Call this JavaScript function

   GuideMe().from('body').start();

Dependencies

popper.js

Advanced usage

Theming

Reference

GuideMe (Function)

Usage

GuideMe(options)

Return

GuideMeController

Options (Object)

Properties

attachTo: (String|Object) Where to attach the dialog element. Can be HTMLElement, css selector, jQuery object or null (body). Default null.

classes: (String) List of space separated classes. Additional css classes for dialog and overlay element. Default: null.

destroyOnDone: (Boolean) If true, automatically calls the destroy() function at the end of the guide. Default false.

allowKeyboardNavigation: (Boolean) Allow steps navigation through keboard. Default true.

• left arrow|back: go to previous step
• right arrow|enter: go to next step
• esc: terminate guide

showOverlay: (Boolean) Show overlay layer. Default true.

overlayClickAction: (String) Action performed when clicking on overlay layer. Default 'done'.

buttons: (Array) An array of Object representing buttons showed on guide dialog. Every button object must have two properties: text and action. Default:

[{ "text": "done", "action": "done" },
 { "text": "prev", "action": "prev" },
 { "text": "next", "action": "next" }]

Actions

• prev: go to previous step
• next: go to next step
• done: exit guide

GuideMeController (Object)

Properties

stepCount: (Number) Number of steps. Read-only.
stepIndex: (Number) Current step index. Read-only.

Methods

from(selector): Search for elements with [data-guideme] attribute, based on passed argument and make a list of Step with them. Each Step will have content property filled with the value of [data-guideme] attribute (if empty will be used title attribute), and order with [data-guideme-order]. Return: GuideMeController. Selector can be:

• HTMLElement
• Array of HTMLElement
• css selector
• jQuery object

addStep(step): Add a step. Return: GuideMeController. Step can be:

• a Step object
• a function that return a Step object
• a string representing the content of a Step without target

start(initialStep): Start the guide from initialStep or first step if not specified. Return: GuideMeController.

end(): End the guide. Return: GuideMeController.

destroy(): Clean GuideMe internal references and remove dialog and overlay elements from DOM. Return: GuideMeController.

onStep

onDone

stapAt

Step (Object)

Properties

target: (HTMLElement)

content: (String|Function)

order: (Number)