JSPM

  • ESM via JSPM
  • ES Module Entrypoint
  • Export Map
  • Keywords
  • License
  • Repository URL
  • TypeScript Types
  • README
  • Created
  • Published
  • Downloads 4
  • Score
    100M100P100Q42981F
  • License MIT

A ReactJS mixin to give new users a popup-based tour of your application.

Package Exports

  • react-tour-guide

This package does not declare an exports field, so the exports above have been automatically detected and optimized by JSPM instead. If any package subpath is missing, it is recommended to post an issue to the original package (react-tour-guide) to support the "exports" field. If that is not possible, create a JSPM override to customize the exports field for this package.

Readme

react-tour-guide

A ReactJS mixin to give new users a popup-based tour of your application.

Getting Started

  1. npm install --save react-tour-guide
  2. var TourGuideMixin = require('react-tour-guide').Mixin
var TourGuideMixin = require('react-tour-guide').Mixin;
var tour = [

];

var InnerApp = React.createClass({

  mixins: [TourGuideMixin(tour)],

  ...

});

Options

An array of "steps" is passed to the TourGuideMixin. Each "step" represents one indicator and tooltip that a user must click through in the guided tour. A step has the following structure:

{
  "text": "The helpful tip or information the user should read at this step.",
  "element": "A jQuery selector for the element which the step relates to.",
  "position": "Where to position the indicator in relation to the element."
}

Positions can be chosen from: top-left, top-right, right, bottom-right, bottom, bottom-left, left, and center. This defaults to center.

HTML Structure

The guided tour consists of two main elements for each step: an indicator and a tooltip. An indicator is a flashing element positioned on a specific element on the page, cueing the user to click. Upon click, the associated tooltip is triggered which the user must then read and dismiss.

Indicator
<div />
Tooltip
<div />