Web制作の現場で使えるjQuery　UIデザイン入門 ― 第16回

透過PNG対応！jQueryでオリジナルツールチップ

2009年10月26日 11時00分更新

文● 西畑一馬／to-R

※この記事は「Web制作の現場で使えるjQuery　UIデザイン入門」の第16回です。過去の記事もご覧ください。

　「ツールチップ」は、テキストや画像の上にマウスカーソルを重ねたときに「ふき出し」のように補足テキストを表示するUIです。ツールチップ自体は、title属性やimg要素のalt属性にテキストを記述すれば表示されますが、ブラウザーによってデザインや挙動が異なり、HTMLやCSSでカスタマイズできません。

　jQueryを使えば、ブラウザーに依存しない独自のツールチップを簡単に実装できます。今回は用途に応じて選べる3種類のツールチップ――（1）CSSで装飾するシンプルなツールチップ、（2）透過GIFを使ったふき出し風のツールチップ、（3）透過PNGを使ったタイマー式のツールチップ――作ってみましょう。

今回制作するサンプル


「ツールチップ」の完成画面。左から、CSSで装飾するツールチップ、透過GIFを使ったツールチップ、透過PNGを使ったツールチップ（画像クリックでサンプルページを表示します）

CSSで装飾するシンプルなツールチップ

　最初に作成するのは、リンク（a要素）にマウスカーソルが重なると補足テキストをフェードインで表示する、シンプルなツールチップです。ツールチップはマウスカーソルの右下にピッタリくっ付いて表示され、マウスの動きに合わせて移動します（サンプル01）。


サンプル01の完成画面。リンクにマウスカーソルを重ねるとツールチップが表示される。ツールチップの位置はマウスの動きに合わせて移動する

　HTML／XHTML（以下、HTML）は以下のようになります。ツールチップを設定するリンクはa要素で通常通りマークアップします。ツールチップ内に表示する補足テキストは、a要素の後ろにspan要素で記述します。span要素には「tooltip」というclass属性を設定します。

▼サンプル01（HTML部分）


<p>Lorem （中略） quis, <a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a>  <span class="tooltip">これはASCII.jpの<br /><strong>Web制作の現場で使えるjQuery<br />UIデザイン入門</strong>（中略）</span> sed.</p>

　ツールチップ部分のCSSは次のようになります。このツールチップはjQueryのfadeIn／fadeOutを使ってアニメーション付きで表示／非表示を切り替えます。fadeIn／fadeOutは、opacity（透明度）の値を徐々に変更しながら、最終的にdisplayプロパティをblock（ブロックレベル要素で表示）またはnone（非表示）に変更します(関連記事）。このため、span要素のCSSはあらかじめブロックレベル要素に変換される前提で設定します。

▼サンプル01（CSS部分）


span.tooltip{
    line-height:1.5;
    color:white;
    width:200px;
    background:#FF9900;
    border:2px solid white;
    padding:1em;
    font-size:small;
}

　スクリプト部分は次のようになります。

▼サンプル01（スクリプト部分）


$(function(){
    $("span.tooltip").css({
        opacity:"0.9",
        position:"absolute";
        display:"none"
    })
    $("a").mouseover(function(){
        $("span.tooltip").fadeIn();
    }).mouseout(function(){
        $("span.tooltip").fadeOut()
    }).mousemove(function(e){
        $("span.tooltip").css({
            "top":e.pageY+10+"px",
            "left":e.pageX+10+"px"
        })
    })
})

　1行ずつ処理の内容を見ていきましょう。最初の命令（2～6行目）は、ツールチップの初期表示状態（ページが読み込まれた直後の状態）を設定しています。ツールチップはマウスカーソルがa要素に重なるまで非表示にする必要がありますが、CSSで非表示に設定するとJavaScriptオフの環境で補助テキストの内容が確認できません。そこで、これまでと同様にjQueryのcss()を使って初期表示状態を定義します（関連記事）。

　css()では、ツールチップを半透明にするため、opacityプロパティで透明度を設定しています。透明度は0～1の間の数値で指定でき、0が透明、1が不透明です。opacityはInternet Explorer（IE）が対応していないCSS3のプロパティですが、jQueryのcss()を使うとIEでも使えます。ここでは、ツールチップの下にあるテキストがうっすら透けて見えるように「0.9」を指定しています。ツールチップの位置は絶対配置で指定するのでpositionプロパティはabsoluteに、マウスオーバーになるまでツールチップを非表示にするためdisplayプロパティをnoneにします。


$("span.tooltip").css({
    opacity:"0.8",
    position:"absolute";
    display:"none"
})

　7行目以降は、ツールチップ（class属性がtooltipのspan要素）を実際に表示するスクリプトです。a要素を対象に、ツールチップの表示／非表示の切り替えから表示位置の設定までの処理をメソッドチェーン（関連記事）を使って一気に記述します。

　まず、a要素のmouseoverイベントにfadeIn()でツールチップを表示する処理を、mouseoutイベントにfadeOut()でツールチップを非表示にする処理を記述します(関連記事)。

　次に、ツールチップの表示位置を変更する処理を記述します。位置の変更は、マウスカーソルの動きを感知するmousemoveイベント(関連記事)の処理として記述します。mousemove() イベント内のfunction(...) に「e」を設定すると、e.pageXとe.pageYにbody要素からマウスカーソルまでの距離（マウスカーソルの座標）が格納されます。ここでは、それぞれに10px加算した値をtopプロパティとleftプロパティにcss()で設定し、マウスカーソルから少しずれた位置にツールチップの位置を変更しています。


mousemoveイベント時に取得できるe.pageYとe.pageX


$("a").mouseover(function(){
    $("span.tooltip").fadeIn();
}).mouseout(function(){
    $("span.tooltip").fadeOut()
}).mousemove(function(e){
    $("span.tooltip").css({
        "top":e.pageY+10+"px",
        "left":e.pageX+10+"px"
    })
})