jQueryプラグインの魅力は，
ツールチッププラグインの要件は以下の通りです。
- titleまたはalt属性がある要素を対象
- titleとalt属性両方を持っている場合はtitleを優先
- 対象要素にマウスオーバーでツールチップをフェードイン
- 対象要素からマウスアウトでツールチップをフェードアウト
- 対象要素上ではツールチップはカーソルに追従
まずは完成サンプルとソースコードを見てみましょう。
完成ソースコード
// ここからツールチッププラグイン
$.fn.easyToolTip = function(options){
// toolTipを生成してbodyに追加しておく
var toolTip = $('<div id="toolTip"></div>').hide();
$('body').append(toolTip);
$(this).filter(function(){
// titleかaltを持っているものだけに絞る
return this.title || this.alt;
}).each(function(){
var self = $(this);
// titleがあればtitleを，なければaltをターゲットにする
var target = this.title ? 'title' : 'alt';
// ターゲットにした属性の値を保存する
var tipText = self.attr(target);
self.hover(function(e){
// ブラウザのツールチップが表示されるのを防ぐために一時的にtitle(alt)を削除
self.attr(target,'');
// toolTipにテキストを入れて表示
toolTip
.stop(true,true)
.fadeIn('fast')
.text(tipText)
.css({
position: 'absolute',
top: e.pageY - 20,
left: e.pageX + 20
})
},function(){
// title(alt)を元に戻す
self.attr(target,tipText);
// toolTipを非表示にする
toolTip.fadeOut('fast');
}).mousemove(function(e){
// カーソルに追従させる
toolTip.css({
top: e.pageY - 20,
left: e.pageX + 20
});
});
});
}
})(jQuery);
jQuery(function($){
// ツールチップの実行
$('img,a,span').easyToolTip();
});
今回使うメソッドの紹介
まずは今回使うメソッドを復習の分も兼ねて紹介しておきます。
filter
filterで指定した要素に絞ります。今回使っている方法は，
$('div').filter(function(){
return this.title; // ここに条件文
});stop
jQueryではfadeInやslideDownなど，
ただしマウスの動きによって連続してアニメーションを実行するなど，
stop(true,true)というように実行すれば便利に使うことができますので，
stopを使わない場合
$('a').hover(function(){
$(this).next().fadeIn('fast');
},function(){
$(this).next().fadeOut('fast');
});
stopを使った場合
$('a').hover(function(){
$(this).next().stop(true,true).fadeIn('fast');
},function(){
$(this).next().fadeOut('fast');
});2つのサンプルの動作を見比べると，
プラグインの枠組み
まずはプラグインの枠組みを作っておきます。これから書いていくコードはこれの中に書きます。
$.fn.easyToolTip = function(){
}
プラグインは以下のように実行できます。
$('a,span,img').easyToolTip();
