だいぶ今更感もありますが、今やWEBサービスのユーザーへの操作説明には欠かせない良くあるチュートリアル系のjQueryプラグインです。
その中でもintro.jsはおすすめです。
こういう部分は是非プラグインを使わせてもらって楽しちゃいましょう。

 

intro.jsプラグインのオススメ/ポイント

intro.jsプラグインのデモ

intro.jsプラグインのページ

intro.jsプラグインの使い方

それではintro.jsプラグインの使い方を見ていきましょう。
それぞれのコードを載せますね。

HTMLコード

<input type="button" id="start-introjs" value="チュートリアル開始">
<img src="image1.jpg" data-step="1" data-intro="ここに説明文">
<img src="image2.jpg" data-step="2" data-intro="ここに説明文">
<div class="hoge" name="hoge" data-step="3"  data-intro="ここに説明文">

CSSコード

<link href="./introjs.css" rel="stylesheet">

JavaScriptコード

<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="./intro.js"></script>
<script>
$(function(){
    $('#start-introjs').click(function(){
        introJs().start();
    });
});
</script>

チェックポイント

プラグインへ一言

---