[jQuery] ヘルプメッセージをポップアップして表示する方法


この記事では、jQueryを使ってヘルプメッセージをポップアップして表示する方法について書いています。まずはヘルプメッセージを表示するサンプルを載せ、次の段階でそれをプラグイン化しています。

※今回のサンプルの動作確認は「Google Chrome」・「Firefox」・「Safari」・「Opera」で行いました。それ以外のブラウザは、期待通りに動かない可能性があります。

目次

  1. 確認用フォーム
  2. ヘルプメッセージをポップアップして表示するサンプル
  3. プラグイン化
  4. サンプルへのリンク

確認用フォーム

今回のサンプルの動作は、下記フォームにて確認して頂けます。

※2015/06/22: 失礼しました。上記サンプルが動作が動作していなかったので、修正しました。jQueryの読み込み失敗が原因でした。

別のタブで動作確認する場合は、こちらをクリックしてください!

↑ 目次に戻る

ヘルプメッセージをポップアップして表示するサンプル

それではサンプルの説明です。まずはjsファイルを作成し、onmouseoverイベントに対して関数を設定します。onmouseoverに対して関数を設定すると、何かにカーソルを重ねたタイミングでその関数が実行されます。例えば

$(TARGET).mouseover(function() {
  alert("こんにちは");
});

と書けば、TARGETにカーソルを合わせたタイミングで「こんにちは」と表示されます。

mouseoverに設定する関数には、大まかに以下の処理を実装します。

  1. メッセージを表示するウィンドウを作成
  2. 表示するメッセージを追加
  3. 位置を決定
  4. 可視化

次は、mouseoutイベントに対して関数を設定します。このイベント設定した関数は、カーソルが対象物から離れたタイミングで実行されます。例えば、

$(TARGET).mouseout(function() {
  alert("さようなら");
});

と書けば、TARGETからカーソルが離れたタイミングで「さようなら」と表示されます。

その関数には、以下の処理を実装します。

  1. メッセージを削除
  2. ウィンドウを非表示化

それでは、この一つ目のサンプルで使うjavascriptの全体像を載せます。

sample1.js

$(function() {

  $(".popup_help").mouseover(function() {
    // 「?」にマウスが重なった場合の処理です。

    // ヘルプウィンドウのトップマージンを定義します。
    // 0だと「?」と上端が揃います。
    var marginTop = 0;

    // ヘルプウィンドウのレフトマージンを定義します。
    // 0だと「?」と左端が揃います。
    var marginLeft = 20;

    // ヘルプウィンドウ表示させる際のスピードを定義します。
    var speed = 300;

    // ヘルプウィンドウのオブジェクトを取得します。
    var popupObj = $(".popup_help_window");

    if (!popupObj.length) {
      // ウィンドウがなければ作成します。
      popupObj = $("<p/>").addClass("popup_help_window").appendTo($("body"));
    }

    // ウィンドウにメッセージを設定します。
    popupObj.text($(this).attr("data-message"));

    // ウィンドウのオフセットを計算します。
    var offsetTop = $(this).offset().top + marginTop;
    var offsetLeft = $(this).offset().left + marginLeft;

    // ウィンドウの位置を整え、表示します。
    popupObj.css({
      "top": offsetTop,
      "left": offsetLeft
    }).show(speed);

  }).mouseout(function() {
    // 「?」からマウスが離れた場合、テキストを空にしてウィンドウを隠します。
    $(".popup_help_window").text("").hide("fast");
  });

})

jsファイルを作成したら、次はcssファイルを用意します。ポイントは、ウィンドウの「position」に「absolute」を設定し、位置を絶対指定している点です。文字や背景の色など、ウィンドウの見た目は下記cssを修正すれば変更することができます。

popup_help.css

.popup_help {
  padding: 0 3px;
  color: #66f;
  font-weight: bold;
  cursor: pointer;
}
.popup_help_window {
  max-width: 300px;
  position: absolute;
  padding: 6px 15px;
  background-color: #fff;
  border: 5px double #ccc;
  display: none;
  color: #63f;
  font-size: 15px;
  font-weight: bold;
  line-height: 1.5em;
  border-radius: 10px;
  box-shadow: 5px 5px 5px #ccc;
}

最後にhtmlファイルを作成します。ここで、

[<span class="popup_help" data-message="お問い合わせ内容を「400文字」以内で入力してください。">?</span>]

といった記述を書くと、「popup_help」というクラスに囲まれた「?」にカーソルを合わせるとウィンドウがポップアップして表示されます。そのウィンドウに、「data-message」に設定した「お問い合わせ内容を「400文字」以内で入力してください。」というメッセージが表示されます。

sample1.html

<!DOCTYPE html>
<html lang="ja">
  <head>
    <meta charset="UTF-8" />
    <title></title>
    <link rel="stylesheet" href="style.css" />
    <link rel="stylesheet" href="popup_help.css" />
    <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js"></script>
    <script src="sample1.js"></script>
    <!--[if lt IE 9]>
    <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
    <![endif]-->
  </head>
  <body>
    <header>
      <h1 id="header_title">ヘルプメッセージをポップアップして表示するサンプル</h1>
    </header>
    <form>
      <div class="field_wrapper">
        <p><span class="label">名前</span>[<span class="popup_help" data-message="あなたの名前を入力してください。">?</span>]</p>
        <input type="text" name="name" />
      </div>
      <div class="field_wrapper">
        <p><span class="label">メールアドレス</span>[<span class="popup_help" data-message="メールアドレスを入力してください。問い合わせ内容の回答は、こちらのメールアドレス宛に送ります。">?</span>]</p>
        <input type="text" name="name" />
      </div>
      <div class="field_wrapper">
        <p><span class="label">お問い合わせ内容</span>[<span class="popup_help" data-message="お問い合わせ内容を「400文字」以内で入力してください。">?</span>]</p>
        <textarea rows="3"></textarea>
      <div class="button_wrapper">
        <button type="submit">登録</button>
      </div>
    </form>
  </body>
</html>

↑ 目次に戻る

プラグイン化

ここでは、上で紹介したサンプルをプラグイン化をしてみます。

jquery.popup_help.js

(function($) {
  $.fn.popupHelp=function(config) {
    /**
      * marginTop: 表示対象とウィンドウの高さの差分です。
      *   0を指定すると、上端が揃います。
      * marginLeft: 表示対象とウィンドウの横の差分です。
      *   0を指定すると、左端が揃います。
      * className: ウィンドウに設定するクラス名です。
      * speed: ウィンドウを表示する際の秒数[ms]です。
      */
    var defaults = {
      marginTop: 0,
      marginLeft: 20,
      className: "popup_help_window",
      speed: 300
    }

    var options = $.extend(defaults, config);

    // ヘルプウィンドウのオブジェクトを準備します。
    var popupObj = $("<p/>").addClass(defaults.className).appendTo($("body"));

    return this.each(function() {

      $(this).mouseover(function() {
        // 表示対象にマウスが重なった時の処理です。

        // ウィンドウにメッセージを設定します。
        popupObj.text($(this).attr('data-message'));

        // ウィンドウのオフセットを計算します。
        var offsetTop = $(this).offset().top + defaults.marginTop;
        var offsetLeft = $(this).offset().left + defaults.marginLeft;

        // ウィンドウの位置を整え、表示します。
        popupObj.css({
          "top": offsetTop,
          "left": offsetLeft
        }).show(defaults.speed);

      }).mouseout(function() {
        // 表示対象にマウスが重なった時の処理です。
        // テキストを空にして、ウィンドウを隠します。
        popupObj.text("").hide("fast");
      });
    });
  };
})(jQuery);

このjsファイルをhtmlで読み込み、そのhtmlで

<script>
  $(function() {
    // ?マークにマウスを載せるとヘルプメッセージを表示させるようにします。
    $("span.popup_help").popupHelp();
  });
</script>

と書けば、「span.popup_help」で取得できる要素にカーソルを合わせると、ポップアップしてヘルプメッセージが表示されるようになります。もし、ウィンドウの位置を変更したい場合は、

  // $("span.popup_help").popupHelp();
  $("span.popup_help").popupHelp("marginTop": 20, "marginLeft": -40});

とすれば、自由に変更することができます。

表示するメッセージは最初のサンプルと同様、「data-message」に設定したものが使われます。例えば

<span class="popup_help" data-message="メールアドレスを入力してください。問い合わせ内容の回答は、こちらのメールアドレス宛に送ります。">?</span>]

だと、「?」にマウスを合わせた場合、ウィンドウに「メールアドレスを入力してください。問い合わせ内容の回答は、こちらのメールアドレス宛に送ります。」が表示されます。

↑ 目次に戻る

サンプルへのリンク

サンプルのファイル類をzipで固めたもの

サンプルの構成

zipの中身には以下のファイルが含まれています。

  • sample1.html --- プラグイン化していないサンプルのhtml
  • sample1.js --- プラグイン化していないサンプルのjs
  • popup_help.css --- ウィンドウの位置などを設定しているcss
  • jquery.popup_help.js --- プラグイン本体
  • sample2.html --- プラグイン化したサンプルのhtml
  • style.css --- このサンプルには直接関係しないcss

↑ 目次に戻る

この記事が役に立った場合、シェアしていただけると励みになります!!