Menu

ツールチップ 1 改良版

Webサイトを作成するには、まずは HTML をマークアップします。そして CSS を使ってデザインを施していきます。

そして最近では、Webデザインをもっと素敵にするために、jQuery を利用する機会も増えてきました。

ツールチップ1 も同じように改良しましょう。ツールチップ 2 - 動作確認をして、改善しよう！と同じように、一度マウスアウトしてしまっても、消えるアニメーションが始まる前にマウスを乗せ直せばツールチップは消えません。

jQuery Code

$(function() {
	$(".tooltip").each(function(){
		var onMouse = false;
		var toolTip = $('<div class="tooltip-body">');
		var toolTipText = $(this).attr("data-tooltip");
		toolTip.html( '<p>' + toolTipText + '</p><span class="tail"></span>' ).hide();
		$("body").append(toolTip);
		$(this).hover(function(){
			onMouse = true;
			if( toolTip.css("display") === "none" ){
				var targetPostion = $(this).offset();
				toolTip.css({
					"display":"block",
					"position": "absolute",
					"left": targetPostion.left + "px",
					"z-index": "9999"
				});
				var toolTipHeight = toolTip.height();
				toolTip.css({
					"top": targetPostion.top - toolTipHeight -3 + "px",
					"opacity": "0"
				})
				.stop().animate({
					"top" : "-=10px",
					"opacity": "1"
				}, 250);
			}
		},
		function(){
			onMouse = false;
			if( toolTip.css("display") !== "none" ){
				setTimeout(function(){
					if(!onMouse){
						toolTip.stop().animate({
							"top": "-=10px",
							"opacity": "0"
							}, 250, function(){
								toolTip.hide();
							}
						);
					}
				}, 1000);
			}

		});
	});
});

Chapter 11