デモ:エフェクトをカスタマイズしたツールチップ

jQuery toolsによる「エフェクトをカスタマイズしたツールチップ」の動作デモです。
イベントの発生タイミングをフォーカスされている/いないにしています。クリックしてフォーカスさせることで確認できます。

サンプルコード

HTMLのサンプル

<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" title="title属性にしていした内容が表示されます。" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" title="dynamicプラグインを追加するとウィンドウサイズに合わせてポジションを調整することができます。" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" style="margin-right:0px" title="チップの表示方法のカスタマイズも多数用意されています。" />

CSSのサンプル

/* ツールチップのスタイル 挿入場所はbodyの一番下になります。 */
.tooltip {
	display:none;
	background: #fff;
	border: solid 4px #eee;
	font-size:12px;
	width:160px;
	padding:25px;
	color:#666;	
	border-radius:5px;
	box-shadow: #59698F 1px 1px 2px;
}
/* トリガーになる画像へのスタイル */
#example img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

Javascriptのサンプル

// 基本的なセットアップ
$(document).ready(function() {
	$.tools.tooltip.addEffect("hogehoge",
		// 表示するとき
		function(done) {
			var tip = this.getTip();
			tip.show();
			tip.animate({
				opacity: 1,
				width: "+=50"
			},done);
			done.call();
		},
		// 非表示するとき
		function(done) {
			this.getTip().animate({
				opacity: 0,
				width: "-=50"
			},done);
		}
	);
	
	$("#example img[title]").tooltip({
		effect: "hogehoge",          // エフェクト
		// イベントの発生タイミングの制御
		events: {
			def:     "mouseup,mousedown",
			input:   "focus,blur",
			widget:  "focus mouseenter,blur mouseleave",
			tooltip: "mouseleave,mouseenter"
		}
	});
});