Iron Man Day 15 - Intro.js

by Sheng Huang Huang

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.4.0/intro.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.4.0/introjs.min.css">
<div>
  <button id="start" data-hint="點說明按鈕開始導覽">
    ?說明
  </button>
</div>

<div data-step="1" data-intro="請先輸入姓名">
  <span>姓名</span>
  <input type="text">
</div>

<div data-step="2" data-intro="再輸入EMail">
  <span>Email</span>
  <input type="text">
</div>

<div data-step="3" data-intro="最後按下送出，就完成註冊囉">
  <input type="button" value="送出">
</div>

CSS

body {
  padding: 15px;
}

JavaScript

document.getElementById('start').addEventListener('click', function() {
  introJs().start();
});

javascript:introJs().addHints();