デモ:基本的なツールチップ

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();
});