TITLE属性を利用した簡単ツールチップの作り方 jQuery編

散々既出な気がするネタシリーズ。TITLE属性をツールチップで表示させるやつです。簡単なヘルプとか表示してあげるとユーザビリティを向上させることができる場合がありますよね。jQueryを使うととても簡単につくれます。というよりも、使いたいときにさらっとコピってすぐ使えると思うので頭の片隅にでも置いておくと便利かもしれません。

Demo
Download demo files

ポイントは

• TITLE属性を持っている要素にイベントを設定する ( *1
• mouseover()でツールチップを生成する ( *2
• mouseout()でツールチップを消去する ( *3
• mousemove()でツールチップの位置を変える ( *4

です。今回はmouseout()で消去するにしてますが、別にいちいち消さなくてもいいです。textを変えればいいだけですから。上の項目をJSソースにすると以下のような感じになります。細かくはコメントを参照してください。

追記: mouseover時にTITLEがブラウザデフォルトのチップで表示されるので、一時的にTITLE属性を空にしてみました。

jQuery(function($){

  // 全要素をからTITLE属性を持っている要素だけに絞る - *1
  $("body *").filter(function(){
    return this.title ＆＆ this.title.length>0; // ＆は半角に打ち直してください。。
  }).each(function(){
  // TITLE属性を持っている要素に適用する

    // あとで使う
    var self = $(this), title = self.attr("title");

    // TITLE属性を持っている要素にhover()で
    self.hover(

      // mouseover - *2
      function(e){ // このeはevent自体を意味する

        // TITLEがあるとブラウザのチップが出るので一時的に空にしておく
        self.attr("title","");

        // とりあえず表示するtip要素を生成しておく
        $("body").append("<div id='title-tip'>"+title+"</div>");
        $("#title-tip").css({
          position: "absolute",

          // e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
          top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少しずらす
          left: e.pageX+15
        });
      },

      // mouseout
      function(){

        // mouseoverで空にしたTITLEを戻す
        self.attr("title",title);

        // 要素から離れた場合はtipを非表示にして削除しておく - *3
        $("#title-tip").hide().remove();
      }
    );

    // 要素上でカーソルが移動した場合は、逐一tipの位置を変える - *4
    self.mousemove(function(e){
      $("#title-tip").css({
        top: e.pageY+(-15),
        left: e.pageX+15
      });
    });
  });

});

全要素から絞り込んでいく方法は要素の量によって処理に時間がかかるので、できれば$(“a”).filter(などのように対象要素を決めてしまったほうがいいです。これでツールチップの表示と移動はできたので後は、CSSで見た目を整えるだけです。例えばサンプルのツールチップは以下のようなスタイルで定義してます。-moz(-webkit)-border-radiusでFirefoxとSafariではツールチップを角丸にしてます。CSSは単純なので問題はないと思います。

div#title-tip {
  margin: 0 1em 0 0;
  border: solid #ccc 1px;
  -moz-border-radius: 4px;
  -webkit-border-radius: 4px;
  padding: .3em .5em;
  background: #fff;
  opacity: .8;
  filter: alpha(opacity=80);
  font-size: 86%;
}

あとは背景をちょっと吹き出し風にするとか、色々遊べますので試してみてください。例えば

// とりあえず表示するtip要素を生成しておく
$("body").append("<div id='title-tip'><div class='tip-right'>"+title+"</div></div>");

のようにDIV要素を入れ子にすることで縦横可変の角丸ツールチップとかできるようになります。

Demo
Download demo files