デモ:スライドエフェクトのツールチップ

jQuery toolsによる「スライドエフェクトのツールチップ」の動作デモです。

サンプルコード

HTMLのサンプル

<a class="btn"></a>
<div class="tooltip"></div>

CSSのサンプル

#example{
	margin-bottom: 20px;
}
#example .btn{
	display:block;
	width: 200px;
	height: 120px;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/btnActionSet/cat1_btn.png) no-repeat;
	border: outset 2px #666;
	border-radius: 12px;
	cursor: pointer;
}
/* tooltip styling */
.tooltip {
	display:none;
	background: url(http://nekodama.sakura.ne.jp/images/webdev/jquerytools/btnActionSet/cat1_pic.png) no-repeat;
	width:500px;
	height: 250px;
	border: solid 5px #eee;
	border-radius: 12px;
	box-shadow: #999 2px 2px 2px;
}
/* a .label element inside tooltip */
.tooltip p {
	black;
}

Javascriptのサンプル

$(document).ready(function() {
	$("#example .btn").tooltip({
		effect: "slide",
		direction: "up",
		slideOffset: "-50"
	});
});