このページの本文へ

DESIGN 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
サンプル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
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"
    })
})


 以上で、ツールチップの完成です。マウスカーソルのすぐ近くに表示されるツールチップは、ユーザーの注意を惹くのに最適です。また、サンプル01のツールチップは、ユーザーがマウスを動かせばツールチップも動くようになっていますので、下に書かれている情報が読みにくくなることも防げます。

jQuery

「まとめて読みたい!」との読者のみなさまの声にお応えし、この連載が本になりました。書籍版はさらに読みやすく加筆修正のうえ、書き下ろしのコラムや記事公開後のアップデート情報も盛り込んでいます。

Web制作の現場で使う
jQueryデザイン入門

本体 3,330円+税、B5変形判344ページ(オール4色刷)
ISBN978-4-04-868411-8

Amazon.co.jpで買う 楽天ブックスで買う

この記事の編集者は以下の記事をオススメしています

ASCII.jp会員サービス 週刊Web Professional登録

HTMLリファレンス誘導バナー

CSSリファレンスサイト誘導バナー

Webディレクター江口明日香が行く

ランキング