デモ:HTML要素をツールチップとして表示

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

サンプルコード

HTMLのサンプル

<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50a.png" class="trigger" />
<div class="tooltip2"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300a.png" /></div>
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50b.png" class="trigger" />
<div class="tooltip2"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300b.png" /></div>
<img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat80x50c.png" class="trigger" />
<div class="tooltip2"><img src="http://nekodama.sakura.ne.jp/images/webdev/jquerytools/thumbSet/cat480x300c.png" /></div>

CSSのサンプル

/* ツールチップのスタイル 挿入場所はbodyの一番下になります。 */
.tooltip2 {
	display:none;
	background: #fff;
	border: solid 4px #eee;
	font-size:12px;
	width:320px;
	height: 200px;
	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({
		effect: "toggle"			   // エフェクト
	});
});