Onboardist UI

Tour: Hide Next Button

Sometimes you want to hide the "Next" button on a component in a tour, if the next stage is triggered by your app.

document.querySelector('#next-button')
  .addEventListener('click', () => {
    Onboardist.UI.next();
  });

this.tour = new Onboardist.UI.Tour({
  // Scenario list
  scenarios: [
    // Scenario #1
    {
      components: [{
        // One element
        component: 'modal',
        title: 'Getting Started',
        content: 'Take a quick tour of the system',
      }],
    },
    // Scenario #2
    {
      components: [{
        component: 'tooltip',
        attach: '#next-button', 
        content: 'Click this button',
        showNext: false,
        showPrev: false,
      }],
    },
    { components: [{ component: 'modal', content: 'You did it!' }] },
  ],
  showNext: true,
  showPrev: true,
});

← Tour: Wait For Element →