Using Intro.js - data-intro

Question

I am currently using Intro.js for my website and the code works is here

<h2 data-step="1" data-intro="Welcome message!">Welcome back</h2>

I wanted to put this audio playback button within the data-intro tag, how do I do it?

<a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>

I've tried things like

 <h2 data-step="1" data-intro="Welcome message! <a onclick="this.firstChild.play()" ><audio src="Audio/WelcomeBack.wav"></audio>▸ </a>">Welcome back</h2>

But it doesn't read the tag.

Sorry, I am still a newbie and need help here :)

Answer 1

In order to do this job, you have to use programmatic defining using JSON.

For instance:

    var intro = introJs();
      intro.setOptions({
        steps: [
          {
            element: '#step1',
            intro: "This is a <b>bold</b> tooltip."
          },
          {
            element: '#step2',
            intro: "Ok, <i>wasn't</i> that fun?",
            position: 'right'
          },
          {
            element: '#step3',
            intro: 'More features, more <span style="color: red;">f</span><span style="color: green;">u</span><span style="color: blue;">n</span>.',
            position: 'left'
          },
          {
            element: '#step4',
            intro: "<span style='font-family: Tahoma'>Another step with new font!</span>",
            position: 'bottom'
          },
          {
            element: '#step5',
            intro: '<strong>Get</strong> it, <strong>use</strong> it.'
          }
        ]
      });

      intro.start();

See this example for more information: http://usablica.github.io/intro.js/example/html-tooltip/index.html