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

透過PNG対応！jQueryでオリジナルツールチップ (2/3)

透過GIFで作る固定位置のツールチップ

　次に作成するのは、透過GIFを利用した「ふき出し」風のツールチップです。先ほどのツールチップはマウスカーソルの動きに合わせて位置を移動していましたが、今度はあくまでも「ふき出し」に見せるため、位置を固定して表示します（サンプル02）。

サンプル02の完成画面。リンクにマウスカーソルを載せると透過GIFのふき出しで補足テキストが表示される。ツールチップの表示位置は固定で、マウスを動かしても変わらない

　テキストの量に応じて縦方向にふき出しのサイズが自動で調整されるように、ふき出しの下側コーナー部分を除いた上側大半の画像と、下側コーナー部分を含む下側の画像の2つを用意します。上側の画像をふき出しテキストの入るp要素の背景として設定すれば、テキストの量によってp要素の高さが決まり、高さに合わせて背景として設定されたふき出しの画像サイズが調整されます。p要素の直後にふき出しの下部をくっつければ、テキストの量に応じて高さが調整されるふき出しになるわけです。

ふき出しのフッター部分を切り出した画像「tooltipFoot.gif」を用意する

　ふき出し部分のHTMLは、ツールチップに表示する内容をclass属性「tooltip」を設定したdiv要素で</body>の直前に記述します。div要素の中に補足テキストを記述したp要素を入れ、p要素の直後にimg要素を配置します。下側の画像として用意した「tooltipFoot.gif」は、ふき出し部分の外側部分を透明にした透過GIF画像です。

▼サンプル02（HTML部分）

<p>Lorem （中略） quis, <a href="http://ascii.jp/elem/000/000/438/438206/">tooltip sample</a> （中略）</p>
<div class="tooltip">
    <p>
        これはASCII.jpの<br />
        <strong>Web制作の現場で使えるjQuery<br />
        UIデザイン入門</strong><br />
        のサンプルプログラムです
    </p>
    <img src="images/tooltipFoot.gif" alt=" " />
</div>
</body>

　CSSは次のようになります。div.tooltipにはふき出し部分を含んだツールチップのサイズとposition:absoluteを指定し、p要素にはツールチップ内に表示する補助テキストのスタイルを記述します。paddingのleftはふき出しのしっぽ（角丸から飛び出した部分）が含まれるように、他の3辺よりも余分に設定します（ここでは40pxにしています）。

　p要素の背景（backgroundプロパティ）に設定した「tooltipBody.gif」は、ふき出しの本体部分を描いた画像です。tooltipBody.gifは、ツールチップに表示する補助テキストの分量が増えても背景が途切れないように、縦方向に大きめ（高め）に作成します。p要素の直後に配置したimg要素にはvertical-align:top;を設定し、p要素とimg要素の隙間を埋めて1枚のふき出し画像のように見せます。

tooltip.gifはp要素の背景画像なので、テキスト量に応じて表示領域の高さが変わる。tooltipFoot.gifをp要素の直後に表示することで、ふき出しが完成する

▼サンプル02（CSS部分）

div.tooltip{
    width:230px;
    position:absolute;
}
div.tooltip p{
    line-height:1.5;
    margin:0;
    font-size:small;
    background:url("images/tooltipBody.gif") top right;
    padding:10px 5px 0 40px;
}
div.tooltip img{
    vertical-align:top;
}

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

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

$(function(){
    $("div.tooltip").css("opacity","0.9").hide()
    $("a").mouseover(function(){
        $("div.tooltip").fadeIn().css({
            "top":$(this).offset().top-20+"px",
            "left":$(this).offset().left+$(this).width()+"px"
        });
    }).mouseout(function(){
        $("div.tooltip").fadeOut()
    })
})

　はじめに、初期表示状態を設定します。css()のopacityで透明度を設定し、hide()でツールチップを非表示に変更します。

$("div.tooltip").css("opacity","0.9").hide()

　次に、a要素のmouseoverイベントにfadeIn()と、ツールチップの位置の設定を記述します。ツールチップの表示位置は、セレクターで指定した要素の表示位置（座標）を取得するjQueryの命令、offset()を使ってa要素の少し右下に設定しましょう。$(this).offset().topと記述すると、a要素のY座標を取得できますので、マウスと重ならないように-20pずらした値をtopプロパティに設定します。$(this).offset().left ではX座標を取得できますので、a要素の右側に表示されるようにa要素の幅を加算した値をleftプロパティに設定します。a要素の幅は$(this).width()で取得できます。

$("div.tooltip").fadeIn().css({
    "top":$(this).offset().top-20+"px",
    "left":$(this).offset().left+$(this).width()+"px"
});

　最後にマウスアウト時にツールチップを非表示にする処理を追加すれば完成です。

$("div.tooltip").fadeOut()