Tour Hello World

You can create your product tour using data-intro and data-title HTML attributes. Simply add those attributes to your elements and call introJs.tour().start():

index.html


<div data-title="Welcome!" data-intro="Hello World! 👋" class="card-demo">
  <div class="card shadow--md">
    <div class="card__image" data-intro="Intro.js can highlight on elements">
      <img
        src="..."
        alt="Image alt text"
        title="Logo Title Text 1"
      />
    </div>
    <div class="card__body" data-title="Farewell!" data-intro="And this is the last step!">
      <h4>Quaco Lighthouse</h4>
      <small>
        The Quaco Head Lighthouse is a well maintained lighthouse close to St.
        Martins. It is a short, beautiful walk to the lighthouse along the
        seashore.
      </small>
    </div>
  </div>
</div>

And then call introJs.tour().start():


// Intro.js scans the webpage and finds all elements with `data-intro` attribute
introJs.tour().start();

Quaco Lighthouse

The Quaco Head Lighthouse is a well maintained lighthouse close to St. Martins. It is a short, beautiful walk to the lighthouse along the seashore.

You can also use data-step to change the ordering of each step of your product tour, more details: Tour HTML attributes.