Menu

ツールチッププラグイン 2

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

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

Chapter11で作成した、マウスに追従するタイプのツールチップのプラグインです。

オプション
  • speed : アニメーションのスピード
  • toolTipClass : ツールチップとなる div要素に付けるクラス
  • textAttr : ツールチップのテキストとなる属性（デフォルトは title属性）
  • caretClass : 装飾用に追加される span要素のクラス
  • topOffset : 上方向へのツールチップのオフセット
  • rightOffset : 右方向へのツールチップのオフセット
  • delay : マウスが外れてから消えるまでの時間差

jQuery Code

(function($){
	$.fn.jqueryToolTip = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* アニメーションのスピード */
			speed: "fast",
			
			/* ツールチップとなる div要素に付けるクラス */
			toolTipClass: "tooltip-body",
			
			/* ツールチップのテキストとなる属性 */
			textAttr: "title",
			
			/* 装飾用に追加される span要素のクラス */
			caretClass: "tail",
			
			/* 上方向へのツールチップのオフセット */
			topOffset: 20,
			
			/* 右方向へのツールチップのオフセット */
			rightOffset: 20,
			
			/* マウスが外れてから消えるまでの時間差 */
			delay: 1000
		}, options);
			
		this.each(function(){
			var onMouse = false;
			var toolTip = $('<div class="' + options.toolTipClass + '">');
			var toolTipText = $(this).attr(options.textAttr);
			toolTip
			.html( '<p>' + toolTipText + '</p><span class="' + options.caretClass + '"></span>' )
			.hide();
			$("body").append(toolTip);
			$(this).hover(function(){
				onMouse = true;
				toolTip.stop().fadeTo(options.speed, 1);
			},
			function(){
				onMouse = false;
				setTimeout(function(){
					if( !onMouse ){
						toolTip.stop().fadeOut(options.speed);
					}
				}, options.delay);
			})
			.mousemove(function(e){
				var toolTipHeight = toolTip.height();
				toolTip.css({
					"position": "absolute",
					"z-index": "9999",
					"top": e.pageY - toolTipHeight - options.topOffset + "px",
					"left": e.pageX - options.rightOffset + "px"
				});
			});
		});
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$(".tooltip").jqueryToolTip({
		speed: 200,
		delay: 500
	});
});

Chapter 15