デモ:フェードインするツールチップ(遅延処理あり)

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;
	-moz-border-radius: 10px;
	-webkit-border-radius: 10px;
	-ms-border-radius: 10px;
	-webkit-box-shadow: #59698F 1px 1px 2px;
	-moz-box-shadow: #59698F 1px 1px 2px;
	box-shadow: #59698F 1px 1px 2px;
}
/* トリガーになる画像へのスタイル */
#example img {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

Javascriptのサンプル

// 基本的なセットアップ
$(document).ready(function() {
	$("#example img[title]").tooltip({
		effect: "fade",          // エフェクト
		fadeOutSpeed: "fast",    // フェードアウト速度
		predelay: 500,           // 表示遅延(ミリ秒)
		delay: 300               // 非表示遅延(ミリ秒)
	});
});