js-bip-tour

Attract your user interest with Bip-Tour

Live Demo

Installation

• Via UNPKG

<script type="text/javascript" src="https://unpkg.com/js-bip-tour@latest/dist/index.js"></script>

• Via NPM

    npm install js-bip-tour

How to use it

• Without a module blunder

  <script type="text/javascript" src="https://unpkg.com/js-bip-tour@latest/dist/index.js"></script>

    // in your js
    let tour = new window.Tour(/*options here*/)
    tour.add({selector: "#first-feature", title: "My first Step", description: "Description of my first Step"});
    let secondStep = new window.Bip({selector: "#second-tour", description: "My second Step", title: "Second Step"});
    tour.add(secondStep);
    tour.play();

• With webpack

    require('js-bip-tour/css/bip.css'); // include css !important
    import {Tour} from 'js-bip-tour';
    let tour = new Tour()
        .add({selector: "#feature", title: "My first feature", description: "Description of my feature"})
        .add({selector: "#feature-2", title: "My Second feature", description: "Description of my feature"});

    tour.play(); // start the tour

Api

• Constructor

  • options : Tour options
    • nextButton: Next Button Text. By defaut Next;
    • prevButton: Previous Button Text. By defaut Previous;

  Example

   new Tour({nextButton: "Suivant", prevButton: "Précédent"})

---

• add : Add new Step
  • options:
    • selector: selector of where the step must appear
    • x: X position of the step. If no selector is specified
    • y: Y position of the step. If no selector is specified
    • title: The title of the step
    • description: The description of the step
    • color: Color of step's dot.

Example

    <button id="new-feature">My new Feature</button>

    let tour = new Tour();
    tour.add({selector: "#new-feature", title: "My first Step", description: "Description of my first step"});
    tour.play();

---

• on : Add an event to execute later when a specific action is executed
  • event : type of the action . Must be one of theses values: TourEvents.FINISH, TourEvents.NAVIGATE_PREV, TourEvents.NAVIGATE_NEXT
  • func : Your function

Example

    <button id="new-feature">My new Feature</button>
    <button id="new-feature-1">My new Feature</button>

    let tour = new Tour();
    tour.add({selector: "#new-feature", title: "My first Step", description: "Description of my first step"});
    tour.add({selector: "#new-feature-1", title: "My Second Step", description: "Description of my Second step"});

    tour.on(TourEvents.FINISH, function () {
        console.log('Tour finished!')
    });

    tour.on(TourEvents.NAVIGATE_PREV, function () {
        console.log('Tour prev button clicked !');
    });

    tour.on(TourEvents.NAVIGATE_NEXT, function () {
        console.log('Tour next button clicked !');
    })

    tour.play();

---

Full Documentation

Full Documentation