Menu

STEP 4 - ツールチップ内の改行を考慮する

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

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

ツールチップ内容が改行されても、キチンと位置を維持することができます。ブラウザの幅を狭くしてから、マウスを乗せてみてください。

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);
			}
		});
	});
});

Chapter 11