« Ajaxで作る立体的回転式メニュー | トップページ | JavaScriptで階層型プルダウンメニュー »

2007.12.01

ポップアップ表示するツールチップ

jQueryのTooltip

Web creators 12月号に載っていたAjaxライブラリ、jQueryのTooltip.jsを紹介してみます。
ポップアップ表示するツールチップです。しかし、ウチの環境では本の通り作ってもIE6でうまく表示されませんでした。

下記のJavaScriptを外部ファイルにしているんですが、どうもそれがIE6ではうまく読み込めないようです。
なので、HTML内に直接記述しています。
$(function() {
/* Tooltipの表示をa.tooltipに限定 */
$('a.tooltip').Tooltip({
/* 表示位置の指定 */
top: 0,
left: 10,
/* タイトルと本文の区切り文字 */
showBody: "-",
/* URL表示ブロックの可視・不可視 */
showURL:false,
/* マウス移動時のTooltipの動き */
track:true
});
/* a.tooltipのクリック時、
href="#"によるアンカー移動をキャンセル */
$('a.tooltip').click(function(){ return false; });
});

また、本のサンプルではcssで透過処理をしていますが、それもIE6では不具合があるようです。
もう1つ、僕のサンプルでは背景に画像を使っています。ここでもIE6は不具合があって、うまく表示されなかったので不細工な感じで回避しています。まあ、実用にはもう少し試作を作ってみないといけないかなと…。

まっ、とりあえずサンプルはこちら

↑このサンプルはこちらからダウンロードできます。

|

« Ajaxで作る立体的回転式メニュー | トップページ | JavaScriptで階層型プルダウンメニュー »

コメント

コメントを書く



(ウェブ上には掲載しません)


コメントは記事投稿者が公開するまで表示されません。



トラックバック

この記事のトラックバックURL:
http://app.cocolog-nifty.com/t/trackback/35737/17240560

この記事へのトラックバック一覧です: ポップアップ表示するツールチップ:

« Ajaxで作る立体的回転式メニュー | トップページ | JavaScriptで階層型プルダウンメニュー »