JSFiddle - React, Tailwind, and code Playground

by kvazarmw

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/driver.js/0.5.2/driver.min.js"></script>
<h1 id="start">GO</h1>

<div id="Step1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Facilis delectus quidem veniam, animi ducimus! Repellendus ipsa impedit, corrupti earum eius cum asperiores nemo doloremque laudantium aliquam, saepe fugiat vero beatae.</div>
<div id="Step2">Temporibus repudiandae vitae consectetur nisi, sed eligendi, tenetur eos adipisci officiis fugiat doloribus tempora dignissimos atque ullam eius beatae! Sapiente est repellat iste consectetur. Aut minus iure nam consequuntur dignissimos.</div>
<div id="Step3">Enim pariatur minus, eius quasi error ratione placeat reprehenderit neque nesciunt incidunt ad culpa dolorem non? Similique, iure odit necessitatibus modi ratione sint molestias repudiandae tempora? Amet error blanditiis suscipit!</div>

JavaScript

function driverSteps() {

	var textStep1 = '#1 Lorem ipsum dolor sit amet <span class="go">go</span>';
  var textStep2 = '#2 Lorem ipsum dolor sit amet <span class="go">go</span>';
  var textStep3 = '#3 Lorem ipsum dolor sit amet <span class="go">go</span>';

	driver = new Driver({
    opacity: 0.6,
    closeBtnText: 'Skip',
    showButtons: true
  });
  
  driver.defineSteps([
            {
                element: '#Step1',
                popover: {
                    title: '<h4 class="titleDrive">WHAT IS SPAM FILTER PRO ?</h4>',
                    description: textStep1,
                    position: 'bottom'
                }
            },
            {
                element: '#Step2',
                popover: {
                    title: '<div>1</div>',
                    description: textStep2,
                    position: 'bottom'
                }
            },
            {
                element: '#Step3',
                popover: {
                    title: '<div>2</div>',
                    description: textStep3,
                    position: 'bottom'
                }
            }
        ]);

	$('#start').click(function () {
    driver.start();
  });

	$('#driver-popover-item .go').click(function () {
    driver.start(defineSteps = 5);
  });

}
driverSteps()