デモ:IDで指定した要素をツールチップとして表示

jQuery toolsによる「IDで指定した要素をツールチップとして表示」の動作デモです。

#idで指定した要素を表示することで、すべてのツールチップ共通の内容を表示できます。

サンプルコード

HTMLのサンプル

<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" class="trigger" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" class="trigger" />
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" class="trigger" />
<div id="tooltip">#idで指定した要素を表示することで、すべてのツールチップ共通の内容を表示できます。</div>

CSSのサンプル

#tooltip {
	display:none;
	background: #fff;
	border: solid 4px #dde;
	padding: 10px;
	font-size:12px;
	font-weight: bold;
	overflow: hidden;
	color:#666;	
	border-radius:5px;
	box-shadow: #59698F 1px 1px 2px;
}
/* トリガーになる画像へのスタイル */
#example .trigger {
	border:0;
	cursor:pointer;
	margin:0 8px;
}

Javascriptのサンプル

$(document).ready(function() {
	$("#example .trigger").tooltip({
		tip: "#tooltip",                  // 固有の#idのツールチップを指定
		opacity: 0.8                      // チップ透明度
	});
});