Menu

STEP 5 - マウスが外れたらツールチップを非表示にする

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

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

マウスが外れたときには、JavaScript の setTimeout()メソッドを利用して、少しだけ消えるアニメーションを遅らせています。

jQuery Code

$(function() {
	$(".tooltip").each(function(){
		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(){
			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(){
			if( toolTip.css("display") != "none" ){
				setTimeout(function(){
					toolTip.stop().animate({
						"top": "-=10px",
						"opacity": "0"
						}, 250, function(){
							toolTip.hide();
						}
					);
				}, 1000);
			}
		});
	});
});

Chapter 11