JSFiddle - React, Tailwind, and code Playground

by jimkennelly

HTML

<script src="https://unpkg.com/@sjmc11/tourguidejs/dist/tour.js" crossorigin="anonymous" referrerpolicy="no-referrer"></script>

<link rel="stylesheet" href="https://unpkg.com/@sjmc11/tourguidejs/dist/css/tour.min.css">

<div class="container" style="max-width:992px;margin: 2rem auto;">
  
  


  <p data-tg-tour='<p>Incident Type Selection</p> <a class="link" href="#" target="_blank">Incident Video Instruction</a>' data-tg-order="0">This is where an incident is depdetermined.  Check all the options before selecting as this choice will guide you through custom screens</p>

<button data-tg-tour='A button' data-tg-order="1" style="margin-top:3rem;background:lightgrey;padding: 0.5rem;" id="example-btn" onclick="handleBtnClick()">This is a button in my app</button>

<p data-tg-tour='The final step' data-tg-order="99" style="margin-top:3rem;background:lightblue;color:darkblue;padding: 1rem;border-radius:1rem;font-size:0.8rem;text-align:center;font-weight:600;">This is a basic demo that starts automatically on load. Refer back to documentatation for more detailed information and examples.</p>
  
</div>

CSS

.tg-backdrop{
  pointer-events:none!important;
}

.link{
  text-decoration: underline;
  color: violet;
}

JavaScript

const tg = new tourguide.TourGuideClient({
  exitOnClickOutside: false
})


tg.start()

function handleBtnClick(){
  console.log('clicked button - do something with tg instance such as focus to a new group of tour steps, change route etc..')
}