// JavaScript Document

$(function(){
			
			// 全要素をからTITLE属性を持っている要素だけに絞る
			$("body *").filter(function(){
				return this.title && this.title.length>0;
			}).each(function(){
				// TITLE属性を持っている要素に適用する
				
				// あとで使う
				var self = $(this), title = self.attr("title");
				
				// TITLE属性を持っている要素にhover()で
				self.hover(
				
					// mouseover
					function(e){ // このeはevent自体を意味する
					
						// TITLEがあるとブラウザのチップが出るので一時的に空にしておく
						self.attr("title","");
					
						// とりあえず表示するtip要素を生成しておく
						$("body").append("<div id='title-tip'>"+title+"</div>");
						$("#title-tip").css({
							position: "absolute",
							
							// e.pageX(Y)でカーソルが要素に乗った時点でのX(Y)座標を取得する
							top: e.pageY+(-15), // カーソルと表示したtipが重なるとチラつくので少しずらす
							left: e.pageX+15
						});
					},
					
					// mouseout
					function(){
					
						// mouseoverで空にしたTITLEを戻す
						self.attr("title",title);
					
						// 要素から離れた場合はtipを非表示にして削除しておく
						$("#title-tip").hide().remove();
					}
				);
				
				// 要素上でカーソルが移動した場合は、逐一tipの位置を変える
				self.mousemove(function(e){
					$("#title-tip").css({
						top: e.pageY+(-15),
		    			left: e.pageX+15
					});		
				});
			});
					
		});