Menu

ツールチップ 2 - 動作確認をして、改善しよう！

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

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

一度マウスアウトしてしまっても、すぐにマウスを乗せ直せばツールチップは消えません。

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;
			toolTip.stop().fadeTo("fast", 1);
		},
		function(){
			onMouse = false;
			setTimeout(function(){
				if(!onMouse){
					toolTip.stop().fadeOut("fast");
				}
			}, 1000);
		})
		.mousemove(function(e){
			var toolTipHeight = toolTip.height();
			toolTip.css({
				"position": "absolute",
				"z-index": "9999",
				"top": e.pageY - toolTipHeight -20 + "px",
				"left": e.pageX -20 + "px"
			});
		});
	});
});

Chapter 11