	$(function(){
		
		// 全要素をからTITLE属性を持っている要素だけに絞る
		$("span").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
				});		
			});
		});
				
	});
