Menu

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

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

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

Chapter11で作成したツールチップのプラグインです。

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

jQuery Code

(function($){
	$.fn.jqueryBubbleTip = function(options){
			
		/* オプションの設定 */
		options = $.extend({
			
			/* アニメーションのスピード */
			speed: "fast",
			
			/* ツールチップのクラス */
			toolTipClass: "tooltip-body",
			
			/* ツールチップのテキストとなる属性 */
			textAttr: "title",
			
			/* 装飾用に追加される span要素のクラス */
			caretClass: "tail",
			
			/* 上方向へのツールチップのオフセット */
			offset: 10,
			
			/* マウスが外れてから消えるまでの時間差 */
			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;
				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" : "-=" + options.offset + "px",
						"opacity": "1"
					}, options.speed);
				}
			},
			function(){
				onMouse = false;
				if( toolTip.css("display") !== "none" ){
					setTimeout(function(){
						if( !onMouse ){
							toolTip.stop().animate({
								"top": "-=" + options.offset + "px",
								"opacity": "0"
								}, options.speed, function(){
									toolTip.hide();
								}
							);
						}
					}, options.delay);
				}
			});
		});
		return this;
	}
})(jQuery);
			
			
jQuery(function($) {
	$(".tooltip").jqueryBubbleTip({
		speed: 200,
		delay: 500,
		offset: 10
	});
});

Chapter 15