Execute javascript function when clicking elements inside tooltip

[greenm1nd3d]

Hi. I want to create a custom steps navigator. I don't want the built-in bullets and previous/next buttons. I want to go to the next step when I click the 'right-nav' button, and I want to be able to navigate to the right steps when clicking their respective bullets. I can't make it work using the API.

  startTutorial() {
    var intro = introJs();
    intro.setOptions({
      steps: [
        {
          element: document.querySelector('#step1'), 
          intro: `<div class="content">
              <h3>Home Section Tutorial</h3>
              <h6>Welcome Window</h6><br />
              <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</p>
              <div class="right-nav" (click)="goToNextFrame();"></div>
            </div>
            <div class="footer">
              <ul class="bullets">
                <li><span class="bullet-1 active" data-step="1"></span></li>
                <li><span class="bullet-2" (click)="introJs().goToStepNumber(2).start();"></span></li>
                <li><span class="bullet-3" (click)="intro.goToStepNumber(3).start();"></span></li>
                <li><span class="bullet-4"></span></li>
                <li><span class="bullet-5"></span></li>
                <li><span class="bullet-6"></span></li>
              </ul>
            </div>`,
          position: 'right',
          step: 1
        },
        {
          element: document.querySelector('#step2'), 
          intro: 'This is step 2'
        }
      ]
    });
  }

[webmarka]

Would like to know how to do that too.

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs. Thank you for your contributions.