Tourguide.js

Getting started with Tourguide.js

by Eugene Trounev

HTML

<script src="//code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<link rel="stylesheet" href="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.0/umd/popper.min.js"></script>
<script src="//stackpath.bootstrapcdn.com/bootstrap/4.1.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/gh/LikaloLLC/[email protected]/tourguide.css">
<script src="https://cdn.jsdelivr.net/gh/LikaloLLC/[email protected]/tourguide.min.js"></script>
 <div class="container">
  <div class="py-5 text-center">
    <h2>Checkout form</h2>
    <p class="lead">Below is an example usage of Tourguide.js' content based approach. Simply add tour step descriptions directly to the HTML elements on page using data-tour property. Click [Start tour] button below to start the guided tour:</p>
    <p>
      <button class="btn btn-success btn-lg btn-block" id="tourbutton">
        Start tour
      </button>
    </p>
  </div>

  <div class="row">
    <div class="col-md-4 order-md-2 mb-4">
      <h4 class="d-flex justify-content-between align-items-center mb-3">
        <span class="text-muted">Your cart</span>
        <span class="badge badge-secondary badge-pill">3</span>
      </h4>
      <ul class="list-group mb-3" data-tour="step: 1; title: Your cart; content: Example cart description text displays cart description">
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Product name</h6>
            <small class="text-muted">Brief description</small>
          </div>
          <span class="text-muted">$12</span>
        </li>
        <li class="list-group-item d-flex justify-content-between lh-condensed">
          <div>
            <h6 class="my-0">Second product</h6>
            <small...

JavaScript

/*
 * Initialize Tourguide.js
*/
var tourguide = new Tourguide();
function startTour() {
	tourguide.start();
}
// Attach the touruide start evene to the button press
var tourbutton = document.getElementById("tourbutton");
tourbutton.addEventListener("click", startTour);