(function($){
// ここからツールチッププラグイン
$.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();
});
jQueryで実装する楽々ツールチップ。title属性やalt属性がある要素にマウスを乗せるとツールチップを表示します。