jQueryで作るマウスに追随するツールチップ

Javascript

2010.01.18

ツールチップは、案外簡単に実現することが出来ました!

HTML・CSSソース

a要素にtooltipクラスを付け、表示させる内容をspan要素のtooltipContクラスに記述します。
CSSソースはtooltipContクラスの「display:none」「position:absolute」と「z-index」が必須で、表示の装飾は任意で行って下さい。

<a class="tooltip" href="http://web-park.org">サンプルテキスト<span class="tooltipCont">ツールチップで表示される内容</span></a>
.tooltipCont {
	display: none;
	position: absolute;
	z-index: 100;
	padding: .5em;
	background: #cef3ff;
	font-size: 80%;
	color: #000;
	text-decoration: none;
}

Javascriptソース

$(function(){
	//各tooltipクラスの動作設定
	$("a.tooltip").each(function(){
		var content = $(".tooltipCont" , this);

		//mousemoveイベントの動作設定
		$(this).mousemove(function(event){
			$(content).css({
				top : event.pageY + 15,
				left : event.pageX + 15
			});
		});
		
		//hoverイベントの動作設定
		$(this).hover(function(){
			$(content).stop(true , true).fadeIn(300);
		}, function(){
			$(content).css("display" , "none");
		});

	});

});

Javascriptソースの解説

4行目
tooltipクラス内のtooltipContクラスを取得しています。
7 – 12行目
マウスのポインターからのtopとleft位置を取得しています。
15 – 19行目
16行目でtooltipContクラスを表示させています。
stop(true , true)を記述することで、アニメーションをループさせないようにしています。

サンプル

こちらのサンプルでは、画像表示もさせています。

  1. Web-Parkのホーム > 
  2. Javascript > 
  3. jQueryで作るマウスに追随するツールチップ
オススメ本(既読)
読んでみたい本(未読)

COMMENT PLEASE!!

トラックバック

「jQueryで作るマウスに追随するツールチップ」のトラックバックURL
http://web-park.org/javascript/tooltip100116.html/trackback
about me

Manabu Kushimoto

Welcome to WEB-PARK.ORG!!
This domain was made since 2008 February.

Gender
Male
Birth year
1982
From
Osaka,Japan
  • はてな?ブックマーク
  • delicious
  • facebook