Menu

STEP 2 - 属性値を要素にする

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

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

画面に変化はありませんが、開発ツールなどでソースを確認してみてください。</body> の直前に、複数の div要素が作成されているのが確認できます。

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

jQuery.com 公式ドキュメント

Chapter 11