実践演習-ツールチップ

ツールチップ - jQuery基本形

<ul>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
<li class="showBalloon" title="ドキュメントを記述するための言語です">HTML</li>
<li class="showBalloon" title="HTMLの要素をどのように表示するかを指定する仕様です">CSS</li>
<li class="showBalloon" title="Webサイトで広く利用されているスクリプト言語です">JS</li>
</ul>

$(function(){
	var balloon = $('<div class="balloon"></div>').appendTo('body');
	function updateBalloonPosition(x, y){
		balloon.css({ left: x + 15, top: y });
	}
	$('.showBalloon').each(function(){
		var element = $(this);
		var text = element.attr('title');
		element.attr('title','');
		element.hover(function(event){
			balloon.text(text);
			updateBalloonPosition(event.pageX, event.pageY); 
			balloon.show();
		},function(){
			balloon.hide();
		})
		element.mousemove(function(event){
			updateBalloonPosition(event.pageX, event.pageY);
		});
	});
});