Onboardist UI

Tour: Wait For Element

Sometimes you need to wait for an element to appear on the page. This example waits for the element with selector #foo to be added to the page before the final scenario runs.

document.querySelector('#next-button')
.addEventListener('click', () => {
  const div = document.createElement('div');
  div.setAttribute('id', 'foo');
  div.innerText = 'foo';
  document.querySelector('.example').appendChild(div);
});

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 to add the target element',
        showNext: false,
        showPrev: false,
      }],
    },
    {
      wait: '#foo',
      components: [{
        component: 'modal',
        title: 'Success',
        content: 'You did it!',
        showPrev: false,
      }],
    },
  ],
});

←