jQueryでオリジナルツールチップを使用する

jQuery2009年11月14日

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

こちらのページを参考にさせていただきました。

実際のサンプルはこちら

CSS

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

JS

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

まず、jQueryでスタイルを設定します。（position:"absolute"やらdisplay:"none"やら）
次にイベント「mouseover」の際、エフェクト「fadeIn」でクラス「tooltip」を表示。
同じくイベント「mouseout」にエフェクト「fadeOut」でツールチップを非表示に。

最後のイベント「mousemove」がちょっとややこしいですが、ツールチップの表示位置を変更する処理を記述します。mousemove() イベント内のfunction() に「e」を設定すると、e.pageXとe.pageYにspan要素からマウスカーソルまでの距離（マウスカーソルの座標）が格納されます。ここでは、それぞれに10pxくわえた値をtopとleftにスタイルを設定し、マウスカーソルから少しずれた位置にツールチップの位置を変更しています。

「ツールチップ」という使い方に限定せず、何気に汎用性のある動きだと思います。
画像に対してキャプション表示させるとか。

この記事を読んでいる方にオススメの記事

「jQuery」の他の記事を読む

この記事にコメントする

※承認制のため、即時には反映されません。