Tour

<!--html-->
<div class="row mb-4">

<div class="col-md-6 mb-4">
  <div class="card text-left">
    <div class="card-body">
      <h4 class="card-title">Start the Tour</h4>
      <button id="startTourBtn" class="btn btn-large btn-raised-primary">Take a tour</button>
    </div>
  </div>
</div>

<div class="col-md-6">
  <div class="card text-left" id="create-tour">
    <div class="card-body">
      <h4 class="card-title">Create your own tour</h4>
      <p id="my-first-tour-file">Myfirst tour</p> 
    </div>
  </div>
</div>
</div>  

//Javascript code
<script>
  "use strict";

  var tour;
  $(document).ready(function () {
    tour = {
      id: "demo-tour",
      showPrevButton: !0,
      steps: [{
        title: "MegaMenu",
        content: "Clean Mega menu ",
        target: "megaMenu",
        placement: "bottom"
      }, {
        title: "search bar",
        content: "Search here for anything",
        target: "search-bar",
        placement: "bottom"
      }, {
        title: "Create your Tour",
        content: "Create new tour easily",
        target: "create-tour",
        placement: "top"
      }]
    };
  });
  $("#startTourBtn").on("click", function (t) {
    hopscotch.startTour(tour);
  });
</script>